Web移动端适配总结

时间 2019-11-05

标签 web 移动适配总结栏目 HTML 繁體版

原文原文链接

一. 1px边框问题

想必各位不管在面试中，仍是工做中，应该遇到过1px边框的问题。不知道也不要紧，如今咱们就来复习一下（知道的朋友能够跳过去看第二部分了）。 1px边框，顾名思义就是前端画出1px的线，这里的1px,指的是屏幕1px大小。那么屏幕的1px和css中的1px有什么区别呢？每一个物理像素（也就是屏幕的1px）是图像显示的最小单元，css的1px是浏览器渲染的基本单位，在普通屏幕下，1px对应1物理像素，在2倍屏、3倍屏下1px分别对应2物理像素、3物理像素。这就比如实验用的坐标纸，假如纸上有10小格（至关于10个物理像素），做图时把你本身坐标系的一个单位用1小格表示，那么你最终作的图占整个坐标纸的面积就比较小，把坐标系的一个单位用10小格表示，可能整个坐标纸只能画出一部分图像，但会保留更多细节。在第2种状况下，同一单位长度的线会是第1种状况下的10倍长。浏览器在高倍屏下渲染也是如此，在2倍屏下画的是2倍粗的线，3倍屏下画的是3倍粗的线。javascript

二. 不一样尺寸的屏幕适配

移动端的屏幕适配，不只仅须要考虑各类尺寸，还要考虑dpr(屏幕像素比，能够理解为每px用多少物理像素显示)，dpr = 2就是2倍屏。一样是宽为350px的设备，普通屏看起来正常，2倍屏看起来线条就很粗，你可能用一些hack例如transform缩放、制造阴影模拟边框，这些多少存在一些问题，若是须要全局都能画出1px的线呢？咱们只要保证让1px始终只占1个物理像素就好了。这里使用meta标签的viewport对全局视图进行缩放。通常是下面这个样子：css

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
复制代码

对于2倍屏设置initial-scale=0.5，对于3倍屏设置initial-scale=0.33，所以，咱们还须要在网页渲染前用脚本经过window.devicePixelRatio获取dpr,而后将initial-scale设置为 1/dpr。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" language="zh-cn-hans">
        <script> (function(){ function resetViewPort (){ var viewport = document.querySelector('meta[name = viewport]'); if(!viewport){ viewport = document.createElement("meta"); var head = document.querySelector("head"); head.insertBefore(viewport,head.firstChild); } var ratio = window.devicePixelRatio||1; var content = 'width=device-width,initial-scale='+ Math.round(100/ratio) / 100 +',maximum-scale=1,user-scalable=no'; viewport.setAttribute("content",content); }; window.addEventListener('DOMContentLoaded',resetViewPort); })() </script>
    </head>
    <body>
    </body>
</html>
复制代码

至此，全部屏幕下1px都对应1物理像素了，如今咱们只须要考虑不一样的屏幕尺寸。不过如今问题来了，由于px的长度已经和以前不同了，若是如今还用px描述元素，确定会变小，所以咱们须要用另外一种单位来表示元素。如今让咱们想一想css除了px外还有那些单位？前端

%
em,rem
vw
...

%通常是相对于父级元素，当有多级嵌套时，就很复杂，很差肯定了，同理，em也有这个缺点。再来看rem，它老是相对于根元素的font-size，根元素是惟一的，只要咱们保证不一样屏幕下根元素的font-size与屏幕的宽度比例一致，就能获得同样的显示效果。这是个很好的方法，只须要在上面的脚本加几行代码就好了，浏览器兼容性也很好，不少文章也介绍了这种方案。不过今天，他不是咱们的主角。再来看看vw，1vw表示的是1/100的屏幕宽度，一个宽为30vw的元素在A设备占屏幕宽度的30%，在B设备一样占屏幕宽度的30%，这不就是咱们想要的吗？让咱们来看看vw的兼容性，能够看出vw几乎彻底兼容。实际上font-size + rem就是模拟的vw，为什么咱们不直接用它呢？java

三. 自动转换插件

咱们通常是拿着设计稿，根据标注写尺寸。标注通常是px为单位，如今写成以vw为单位，则须要进行一个转换。这种换算的工做咱们让插件来作，不过目前好像没找到相关postcss插件，因而本身写了一个——postcss-unify,代码很简单只有20行，就是用正则匹配而后替换，感兴趣的你也能够本身作一个。这里简单说一下postcss，它能将css转化为js对象便于咱们操做，再将结果转化成css代码，在这里了解更多（写插件的方法在连接里也有）。git

四. 其余

双十一都过了，老子仍是单身！
本文参考了不少文章，同时结合了实践探索，有什么不对或更好的地方欢迎提出。
~~都被你看个精光了，还不给个赞？github

Web移动端适配总结

一. 1px边框问题

二. 不一样尺寸的屏幕适配

%

em,rem

vw

...

三. 自动转换插件

四. 其余