@media移动端屏幕适配

viewport 的作用很重要&＃xff0c;(不加这个meta标签,我不会告诉你在手机屏幕上字体显示特别小)但不是本文的重点所以不展开&＃xff0c;有兴趣的同学可以自行搜索。

下面四个方案来自同事共享&＃xff0c;原理都是采用等比缩放的方式 —— 获得目标屏幕宽度和设计稿宽度的比&＃xff0c;作为 rem 的基值&＃xff08;缩放系数&＃xff09;&＃xff0c;设置为html标签的字体大小。不同的只是在于性能取舍和书写习惯。
方案1

&＃64;media screen and (min-width: 320px) {html{font-size:50px;}}
&＃64;media screen and (min-width: 360px) {html{font-size:56.25px;}}
&＃64;media screen and (min-width: 375px) {html{font-size:58.59375px;}}
&＃64;media screen and (min-width: 400px) {html{font-size:62.5px;}}
&＃64;media screen and (min-width: 414px) {html{font-size:64.6875px;}}
&＃64;media screen and (min-width: 440px) {html{font-size:68.75px;}}
&＃64;media screen and (min-width: 480px) {html{font-size:75px;}}
&＃64;media screen and (min-width: 520px) {html{font-size:81.25px;}}
&＃64;media screen and (min-width: 560px) {html{font-size:87.5px;}}
&＃64;media screen and (min-width: 600px) {html{font-size:93.75px;}}
&＃64;media screen and (min-width: 640px) {html{font-size:100px;}}
&＃64;media screen and (min-width: 680px) {html{font-size:106.25px;}}
&＃64;media screen and (min-width: 720px) {html{font-size:112.5px;}}
&＃64;media screen and (min-width: 760px) {html{font-size:118.75px;}}
&＃64;media screen and (min-width: 800px) {html{font-size:125px;}}
&＃64;media screen and (min-width: 960px) {html{font-size:150px;}}
方案2

&＃64;media screen and (min-width: 320px) {html{font-size:312.5%;}}
&＃64;media screen and (min-width: 360px) {html{font-size:351.5625%;}}
&＃64;media screen and (min-width: 375px) {html{font-size:366.211%;}}
&＃64;media screen and (min-width: 400px) {html{font-size:390.625%;}}
&＃64;media screen and (min-width: 414px) {html{font-size:404.2969%;}}
&＃64;media screen and (min-width: 440px) {html{font-size:429.6875%;}}
&＃64;media screen and (min-width: 480px) {html{font-size:468.75%;}}
&＃64;media screen and (min-width: 520px) {html{font-size:507.8125%;}}
&＃64;media screen and (min-width: 560px) {html{font-size:546.875%;}}
&＃64;media screen and (min-width: 600px) {html{font-size:585.9375%;}}
&＃64;media screen and (min-width: 640px) {html{font-size:625%;}}
&＃64;media screen and (min-width: 680px) {html{font-size:664.0625%;}}
&＃64;media screen and (min-width: 720px) {html{font-size:703.125%;}}
&＃64;media screen and (min-width: 760px) {html{font-size:742.1875%;}}
&＃64;media screen and (min-width: 800px) {html{font-size:781.25%;}}
&＃64;media screen and (min-width: 960px) {html{font-size:937.5%;}}
方案3

var designWidth &＃61; 640, rem2px &＃61; 100;
document.documentElement.style.fontSize &＃61; 
  ((window.innerWidth / designWidth) * rem2px) &＃43; &＃39;px&＃39;;
方案4

var designWidth &＃61; 640, rem2px &＃61; 100;
document.documentElement.style.fontSize &＃61; 
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) &＃43; &＃39;%&＃39;;
为了更避免理解上的混乱&＃xff0c;我在上面js的代码中加了 ( ) &＃xff0c;实际代码中是不需要的。
详细分析一下&＃xff0c;rem 和 px 直接的转换公式可以写为&＃xff1a;

1rem &＃61; 1 * htmlFontSize
htmlFontSize 为 html 元素的字体大小。
首先来看方案1中&＃xff0c;在屏宽为640px情况下的设置&＃xff1a;

&＃64;media screen and (min-width: 640px) {html{font-size:100px;}}
可以很明显的表现出这一点 1rem &＃61; 1 * 100px &＃xff0c;同我们最初的设定。那么我们要得到其它屏幕大小的 htmlFontSize 值要怎么办。很简单如方案3&＃xff0c;因为我们的采用等比缩放的方式适配&＃xff0c;所以计算目标屏幕宽度和设计稿的宽度的比即可&＃xff1a;

window.innerWidth / designWidth * rem2px &＃43; &＃39;px&＃39;
由于浏览器默认字体大小为 16px&＃xff0c;所以当我们使用百分比作为根节点 html 的字体大小时&＃xff0c;即html元素的font-size值设置为一个百分比值&＃xff0c;rem 的计算方式就会改为&＃xff1a;

defaultFontSize &＃61; 16px
1rem &＃61; 1 * htmlFontSize * defaultFontSize
如方案2中&＃xff0c;在屏宽为640px情况下的设置&＃xff1a;

&＃64;media screen and (min-width: 640px) {html{font-size:625%;}}
应用上面的公式&＃xff1a;

1rem &＃61; 1 * 625% * 16px
其中&＃xff1a;625% * 16 &＃61; 6.25 * 16 &＃61; 100
所以&＃xff1a;1rem &＃61; 1 * 100px
同样的可以得到所有屏幕大小下&＃xff0c;html 的 font-size 值的计算公式&＃xff0c;即为方案4&＃xff1a;

window.innerWidth / designWidth * rem2px / 16 * 100  &＃43; &＃39;%&＃39;
通过方案3和方案4的公式&＃xff0c;就可以很方便的生成方案1和方案2中的css。

这里只给出了方案3和方案4对应验证页面&＃xff08;方案1和方案2是它们的变形&＃xff09;: scheme3.html, scheme4.html

如下面两张图&＃xff0c;是在屏宽为360px下的效果&＃xff0c;通过计算目标为&＃xff1a;1rem &＃61; 56.25px。方案3设置值为&＃xff1a;56.25px&＃xff0c;方案4设置值为&＃xff1a;351.5625%
方案3        方案4
        
到目前为止貌似很完美的解决了问题&＃xff0c;实际情况当然是出现了意外。在有些 Android 手机上&＃xff0c;浏览器或 webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px。

修改默认字体大小后&＃xff0c;我们再看方案3和方案4。

同样在屏宽为360px下&＃xff0c;我们调大系统字体大小&＃xff0c;如下面的效果

设置前 html 元素的字体大小的计算值为 18px &＃xff0c;设置后的计算值为 65px &＃xff0c;由于屏幕宽度没有改变&＃xff0c;我们的目标值&＃xff0c;即我们在 html 元素上设置的 font-size 值也没有变化任然为 56.25px&＃xff0c;而最终计算值出现了偏差。
方案3        方案4
        
分析偏差前&＃xff0c;先来看在360px屏宽下&＃xff0c;方案3和方案4的计算过程&＃xff1a;

方案3&＃xff1a;

document.documentElement.style.fontSize &＃61; 56.25px
htmlFontSize &＃61; 56.25px
1rem &＃61; 1 * htmlFontSize &＃61; 56.25px
实际为&＃xff1a;
1rem &＃61; 64.6875px
方案4&＃xff1a;

document.documentElement.style.fontSize &＃61; 351.5625%
htmlFontSize &＃61; 351.5625%
defaultFontSize &＃61; 18px
1rem &＃61; 1 * htmlFontSize * defaultFontSize &＃61; 351.5625% * 18px &＃61; 63.28125px
351.5625% * 18 &＃61; 63.28125
实际为&＃xff1a;
1rem &＃61; 64.6875px
貌似方案4的计算结果很接近实际效果&＃xff0c;而方案3偏差很大。再来比较方案3和方案4的计算公式&＃xff1a;

// 方案3
document.documentElement.style.fontSize &＃61; 
  window.innerWidth / designWidth * rem2px &＃43; &＃39;px&＃39;;

// 方案4
document.documentElement.style.fontSize &＃61; 
  window.innerWidth / designWidth * rem2px / 16 * 100 &＃43; &＃39;%&＃39;;
方案4较于方案3其实多除了一个16&＃xff0c;可以推测浏览器在计算 rem 的具体值时&＃xff0c;如果 html 设置的 font-size 为 px 值时会先除以 16 &＃xff0c;然后再乘以 htmlFontSize。

1rem &＃61; 1 * (56.25px / 16) * 18
1 * (56.25 / 16) * 18 &＃61; 63.28125
方案4存在问题&＃xff0c;是因为系统的默认字体改为了 18px &＃xff0c;但是我们在计算百分比是时候&＃xff0c;还是以 16px 为基准值进行计算&＃xff0c;所以出现偏差&＃xff08;计算值和实际值之间还有一点偏差这个在后面会提到&＃xff09;。

而在方案3中&＃xff0c;我们其实是不考虑浏览器默认字体大小的&＃xff0c;但在实际使用的过程中&＃xff0c;浏览器还是除了 16 &＃xff0c;而此时默认字体大小为 18px。得出如下在 html 的 fontSize 设置为 px 的情况下 rem 的计算公式为&＃xff1a;

1rem &＃61; 1 * (htmlFontSize / 16) * defaultFontSize
在系统设置的字体大小发生改变时&＃xff0c;defaultFontSize 会跟着改变&＃xff0c;而 16 不会变化。所以方案3虽然表面上不考虑默认字体大小的变化&＃xff0c;只关注屏幕与设计稿之间的宽度比&＃xff0c;但在实际计算中还是使用到了默认字体大小&＃xff0c;而且还有一个不变的 16 在作祟&＃xff0c;导致方案3失败。

所谓的「root element」其实不是想象的那样&＃xff0c;一个是16&＃xff0c;一个是18&＃xff0c;到底取的是那个 root element 的字体大小。
ok&＃xff0c;rem 的计算的时候&＃xff0c;px 的方式会有一个16不随系统字体大小改变&＃xff0c;所以我们采用百分比的方案&＃xff0c;绕开这个问题。

采用百分比的方案4因为在计算时写死了默认字体大小 16px。所以它的偏差在于没能动态的获取默认字体大小。更新如下&＃xff1a;

方案4.1

var designWidth &＃61; 640, rem2px &＃61; 100;
var h &＃61; document.getElementsByTagName(&＃39;html&＃39;)[0];
var htmlFontSize &＃61; parseFloat(window.getComputedStyle(h, null)
                                    .getPropertyValue(&＃39;font-size&＃39;));

document.documentElement.style.fontSize &＃61; 
  window.innerWidth / designWidth * rem2px / htmlFontSize * 100 &＃43; &＃39;%&＃39;;
效果如下图&＃xff1a;

16px 的图中&＃xff0c;设置后的 html 的 font-size 与 1rem 的实际值有偏差&＃xff0c;同时 6.4rem 的计算值也有偏差。通过查看代码发现html的font-size使用的是&＃xff1a; getPropertyValue(&＃39;font-size&＃39;) 而 1rem 使用的是 getPropertyValue(&＃39;width&＃39;)&＃xff0c;偏差出在计算 font-size 的时候浏览器进行了四舍五入。rem 定义中的另一个元素「font size」也不能按字面意思使用&＃xff0c;宣告失守。

18px 中的偏差&＃xff0c;以及上文中方案4在 18px 实际值和计算值出现的偏差都是同样的问题。所以基准值还需要修改。
16px        18px
        
在更新一版&＃xff0c;方案4.2&＃xff1a;

var designWidth &＃61; 640, rem2px &＃61; 100;
var d &＃61; window.document.createElement(&＃39;div&＃39;);
d.style.width &＃61; &＃39;1rem&＃39;;
d.style.display &＃61; "none";
var head &＃61; window.document.getElementsByTagName(&＃39;head&＃39;)[0];
head.appendChild(d);
var defaultFontSize &＃61; parseFloat(window.getComputedStyle(d, null).getPropertyValue(&＃39;width&＃39;));
d.remove();
document.documentElement.style.fontSize &＃61; 
  window.innerWidth / designWidth * rem2px / defaultFontSize * 100 &＃43; &＃39;%&＃39;;
效果如下图&＃xff1a;

16px        18px
        
到此为止&＃xff0c;rem 在默认字体不是 16px 的情况下的处理已经解决&＃xff0c;考虑到还有设计屏幕旋转&＃xff0c;最终手机端的解决方案为&＃xff1a;

function adapt(designWidth, rem2px){
  var d &＃61; window.document.createElement(&＃39;div&＃39;);
  d.style.width &＃61; &＃39;1rem&＃39;;
  d.style.display &＃61; "none";
  var head &＃61; window.document.getElementsByTagName(&＃39;head&＃39;)[0];
  head.appendChild(d);
  var defaultFontSize &＃61; parseFloat(window.getComputedStyle(d, null).getPropertyValue(&＃39;width&＃39;));
  d.remove();
  document.documentElement.style.fontSize &＃61; window.innerWidth / designWidth * rem2px / defaultFontSize * 100 &＃43; &＃39;%&＃39;;
  var st &＃61; document.createElement(&＃39;style&＃39;);
  var portrait &＃61; "&＃64;media screen and (min-width: "&＃43;window.innerWidth&＃43;"px) {html{font-size:"&＃43; ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) &＃43;"%;}}";
  var landscape &＃61; "&＃64;media screen and (min-width: "&＃43;window.innerHeight&＃43;"px) {html{font-size:"&＃43; ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) &＃43;"%;}}"
  st.innerHTML &＃61; portrait &＃43; landscape;
  head.appendChild(st);
  return defaultFontSize
};

方案五,当然了,如果你会使用less或者sass,利用less就会自动计算出不同屏幕下的字体大小,样式会跟方案一相同,下面贴代码:

.re(&＃64;width){
    &＃64;xs : 100px/(640px/&＃64;width);
    &＃64;media (max-width:(&＃64;width &＃43; 2px)){
        html{
            font-size:&＃64;xs;
        }
    }
}

你只需要写入屏幕大小即可

.re(320px);

.re(768px);
.re(640px);
.re(600px);