移动端适配不同分辨率屏幕一般用什么方法呢？目前采用媒体查询设置不同html的font-size

Question

html {

    width:100%;

    height:100%;

    font-size:12px;

    line-height:1.5;

}

@media only screen and (min-width:320px) {

    html  {font-size:12px;}}

@media only screen and (min-width:375px) {

    html  {font-size:14px;}}

@media only screen and (min-width:412px) {

    html  {font-size:16px;}}

    

目前基本是这样的写法，针对不同分辨率设置不一样的font-size，直接设置html，也就改变了rem，所以和px相关的就可以直接用rem解决，基本没有什么大问题，当然这里媒体查询只有三个屏幕，还可以更多，但我懒得弄了。最近发现在大屏安卓手机上字体很大，然后觉得可能这个方法不是很合理，不过ios全平台一直很好。看了一些文章后，发现很困惑，的确有几个不一样的方法，好多人推荐淘宝的flexable.js，但我看了下，觉得繁琐，能用css解决的就不要用js，所以懒得尝试，不知道是不是真的很好。然后还看到一段代码html,body {font-size: calc(100vw/7.5);}，觉得很简短，但不知道是否合理。所以想看看大家一般怎么适配不同分辨率的手机的啊，固定字体的话不合理，小手机偏大，大手机高分屏看不清，而且也不怎么搞得懂dpr啥的，大家有没有好的简单点的什么方法啊。

Answer 1

基本原理就是你这样，不同屏幕宽度设置不同的font-size，你可以用js实现，比如以iphone6 1rem=40px 为基准，i6的css width 为375，然后求不同终端屏幕宽度和i6的比例，这样设置font-size比用媒体查询细致一点：(function(doc,win){    var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){        var clientWidth = docEl.clientWidth;        docEl.style.fontSize = 40 * (clientWidth / 375) + 'px';    };    if(!doc.addEventListener){        return;    }    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener('DOMContentLoaded', recalc, false);    recalc()})(document, window)

Answer 2

rem布局要根据屏幕大小动态设置html的font-size的，淘宝的flexiable.js就是这样子的，然后根据你的设计稿，把所有的px的单位按照设计稿的宽度转换成rem。这样子的结果就是在不同分辨率的屏幕上，就像缩放一样。整个屏幕展示的内容信息量在所有分辨率下都是一样。我们在移动端的做法一般是750px的设计稿，按照一半（Retina屏幕的原因）的值来写css。高度还是用px，宽度要做些调整，可以用百分比或者flex.我们的字体大小是固定的，因为我们追求在更大的屏幕下能够展示更多的内容。而不是让字体随着屏幕越大而变得越大。说实话，你低分辨率的屏幕都能看清的字到了高分辨屏当然能看清。其实一楼的做法我却的也行呀

Answer 3

前提 如果你对设计稿的还原度要求不需要打到1像素级别，可以直接<meta name="viewport" content="width=设计稿的宽度例如：750, user-scalable=no, target-densitydpi=device-dpi">我们公司就是这么干的，然后就可以直接按设计稿上的大小写页面了

Answer 4

你可以试试vh和vw这两个单位