一篇解决移动端适配的文章

前言在手机市场越来越丰富的同时，给我们前端开发者带来的“自适应屏幕尺寸显示网页内容的问题”也越来越突出，而我们接下来会详细阐述移动端适配的过去、现在和解决方案。1、为什么要适配移动端？一般情况下，设计稿的设计者都是按照375的尺寸来设计的。但是在移动终端（也就是手机）快速更新的时代，各个品牌的手机物理分辨率不同，这会导致每个设备的不同逻辑分辨率。这时候基本不可能还原375的设计稿了，因为如果有左右布局的话，如果左边硬编码，右边自适应的话，这种情况下，尺寸每个设备右侧显示的内容都不一样，此时移动端的适配就显得尤为重要。既然要了解前世今生，那我们先从几个概念说起，先从一张图说起。下面我们一一分析1.1屏幕尺寸屏幕尺寸是以屏幕对角线的长度来衡量的，测量单位是英寸。如图所示，两条对角线的长度就是屏幕大小的1.2个像素。我们看到上图中的320x480叫做分辨率，这个所谓的分辨率就是横向320像素，纵向480像素。什么是1.2.1？什么叫像素？像素（Pel，pixel，pictureelement）是构成图像所有亮度和色度的最小图像单位。电视的图像是由按一定间隔排列的不同亮度的图像点组成的。构成像点的单位是像素，构成图像的最小单位是像素。从计算机技术的角度来看，像素是可以被硬件和软件控制的最小单位。是指显示屏画面上显示的最小单位，不是图片上的最小单位。一幅图像通常包含数以万计的像素点，每个像素点都有自己的颜色信息，并且它们紧密结合在一起。由于人眼的错觉，这些组合像素被视为完整的图像。当修改图像的某个区域时，实际上是在修改该区域内的像素。您修改这些像素的好坏将决定最终图像的质量。每单位面积的像素越多，图像看起来就越好。一幅彩色电视图像由数千个像素点组成，每个像素点又由红、绿、蓝三种颜色并排组成。（注意每个像素点的大小不是固定的，是根据设备的分辨率来决定的，后面会考知识点。）1.2.2什么是分辨率？屏幕分辨率是指在垂直和水平方向上的像素个数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素为单位。对于相同尺寸的屏幕而言，当屏幕分辨率较低时（例如640x480），屏幕上显示的像素点较少，单个像素点的尺寸相对较大。当屏幕分辨率很高时（例如1600x1200），屏幕上显示的像素点很多，单个像素点的尺寸比较小。知道什么是分辨率后，有些人会感到惊讶。记得苹果官网的Apple6分辨率是750x1334，但是设计稿上Apple6的分辨率是375x667，每台设备的分辨率都比实际分辨率小很多，这涉及到一些历史原因。1.2.3设备物理分辨率（设备像素）相信我们所有的前端开发人员都见证过手机的开发过程，手机是移动设备。从蓝屏手机到彩屏手机，再到诺基亚开发的触屏手机，再到智能手机，我们的手越来越清晰，越来越大，所以我们的屏幕发展也越来越快。从上图可以很明显的看出，不同分辨率带来的差距，从最初的颗粒屏，到720p再到1080p，乃至现在各种旗舰手机的2k屏。我们的物理分辨率正在变大。这就暴露了一个问题。如果我们将手机的分辨率提高一倍，我们的图像就会翻倍。是不是每个设备都要出一个设计稿，每个设备的分辨率都不一样。其实你担心的问题，我们乔领导很多年前就想到了。这就是我们的逻辑分辨率1.2.4逻辑分辨率（设备无关像素）如下图所示。尽管设备的物理分辨率不同，但逻辑分辨率几乎相同。感谢乔。乔布斯在iPhone4发布会上首次提出了RetinaDisplay（视网膜屏幕）的概念。iPhone4使用的retina屏幕，将2x2像素当成1像素使用，让画面看起来更加细腻，但是元素的尺寸却非常小。不会改变。从那以后，高分辨率设备增加了一个逻辑像素。虽然这些设备在逻辑像素上的差异并没有太大的跨度，但还是有那么一点点区别，于是就诞生了移动端页面适配的问题。由于逻辑像素源自物理像素，因此它们将具有像素比。1.2.5设备像素比设备像素比，简称dpr，是物理像素与设备独立像素的比值。为什么需要知道设备像素比？因为这个像素比会导致一个很经典的问题，1像素边框的问题。1px边框问题我们在css中写1px的时候，因为是逻辑像素，所以我们的逻辑像素是根据设备像素比（dpr）映射到设备上的，也就是2px或者3px，由于各个设备的屏幕大小不同导致每个物理像素渲染出来的大小不一样（记住上面的知识点，设备的像素大小是不固定的），所以如果在更大尺寸的设备上，1px渲染同样的Roughmine，这就是经典的——像素边界问题。如何解决核心思想是在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。在css中可以使用媒体查询min-device-pixel-ratio来区分dpr：我们根据这个像素比来计算对应的尺寸，但是暴露了一个非常大的兼容性问题。其中，Chrome将0.5px四舍五入为1px，firefox/safari可以绘制半个像素的边，Chrome将小于0.5px视为0，Firefox将不小于0.55px视为1px，Safari则不少于小于0.55px视为1px小于0.75px视为1px，进一步在手机端观察，iOSChrome会画出0.5px的边，而Android（5.0）的原生浏览器是不行的。所以直接设置0.5px在不同的浏览器之间差别很大，我们看到不同系统的不同浏览器对小数点px的处理也是不一样的。所以如果我们把单位设置为十进制px，包括宽高等，其实是不靠谱的，因为不同的浏览器表现不同。至于单像素边框问题的其他解决方法，网上有一堆答案。在这里我推荐一个非常好用且没有副作用的方案。transform:scale(0.5)schemediv{height:1px;background:#000;-webkit-transform:scaleY(0.5);-webkit-transform-origin:00;overflow:hidden;}根据设备像素进行媒体查询后的cssratioSolution/*2xscreen*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2.0){.border-bottom::after{-webkit-transform:scaleY(0.5);transform:scaleY(0.5);}}/*3x屏幕*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3.0){.border-bottom::after{-webkit-transform:scaleY(0.33);transform:scaleY(0.33);}}这样就完美解决了一个像素看起来粗的问题。ExtendedSupplementaryCSS最新规范计划通过标准属性实现单像素边框，通过在border-width属性中添加hairline关键字属性，如下链接[1]所示。之所以叫发际线，是因为一个像素的边界和头发一样。在练习使用方案时，也要多关注最新动态。2.如何适配2.1视口视口（viewport）表示当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI、菜单栏等-您正在查看的文档部分。那么如何在移动端配置viewport呢？一个简单的元标记就足够了！它们是什么意思？如果我们想在移动视口中有好的视觉效果和体验，那么我们的视口宽度就必须无限接近理想视口。理想视口：一般来说，这个视口并不真实存在。是设备最理想的布局视口尺寸，在用户不手动缩放的情况下页面也能理想显示。那么所谓的理想宽度就是浏览器（屏幕）的宽度。所以上面的元设置是我们理想的设置。它规定了我们视口的宽度就是屏幕的宽度，初始缩放比例为1，也就是说我们的可视视口一开始就是理想的视口！其中user-scalable设置为no可以解决移动端点击事件的延迟问题（扩展）2.2适配方式2.2.1rem适配rem是CSS3中一个新的相对单位，引起了广泛关注。这个单位和em有什么区别？不同的是，当使用rem为元素设置字体大小时，它仍然是一个相对大小，但相对大小只是HTML根元素。这个单位可以说是结合了相对大小和绝对大小的优点。通过它，只需修改根元素就可以按比例调整所有字号，避免字号逐层复合的连锁反应。目前，除IE8及更早版本外，所有浏览器均支持rem。对于不支持的浏览器，解决办法也很简单，就是多写一个绝对单元语句。这些浏览器忽略使用rem设置的字体大小。例如：//假设我设置根元素的大小为14pxhtml{font-size:14px}//那么我下面的p标签也是14像素，如果你要p{font-size:1rem}//就这样对于rem的布局，不得不提一下flexible。灵活方案是阿里早期开源的移动端适配方案。引用flexible之后，我们在页面上统一使用rem进行布局。他的原理很简单//set1rem=viewWidth/10functionsetRemUnit(){varrem=docEl.clientWidth/10docEl.style.fontSize=rem+'px'}setRemUnit();rem是相对于html节点的字体大小计算的。所以在页面开始的时候给根元素设置一个font-size，接下来的元素会按照rem进行布局，这样当页面大小变化时布局可以自适应。这样我们只需要将设计稿的px换算成对应的rem单位即可。当然，这个方案只是一个过渡方案。为什么叫过渡方案，因为viewport在低版本Android设备上仍然存在兼容性问题，而vw和vh还没有兼容所有浏览器，所以灵活方案使用rem来模拟vmin。在不同设备上实现比例缩放的“过度”方案，之所以称为过度方案，是因为他的根据设备尺寸判断页面的方案，是根据屏幕100%还原设计稿尺寸，让人看到的尺寸效果是一样的，但是iPhone5和iPhone6p虽然看到的设计稿是一样的，但是在合适的距离下效果能一样吗？本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的文字。所以，这种缩放问题的解决方案是一个过渡方案，注定要被时代淘汰。2.2.2vw、vh布局vh、vwplan是将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight分成100份。vh和vw的方案和rem类似，做单位转换比较麻烦，而且px到vw的转换也不一定能整除，所以有一定的像素差异。然而，在当今的工程世界中，webpack在解析css时使用了postcss-loader。有一个postcss-px-to-viewport可以自动将px转换为vw{loader:'postcss-loader',options:{plugins:()=>[require('autoprefixer')({browsers:['last5versions']}),require('postcss-px-to-viewport')({viewportWidth:375,//视口宽度(number)viewportHeight:1334,//视口高度(number)unitPrecision:3,//设置保留小数places(number)viewportUnit:'vw',//设置要转换的单位(string)selectorBlackList:['.ignore','.hairlines'],//不需要转换的类名(array)minPixelValue:1,//设置要替换的最小像素值(number)mediaQuery:false//允许媒体查询中px的转换(true/false)})]}2.2.3px为主，vx和vxxx(vw/vh/vmax/vmin）作为补充，加上一些flex（推荐）之所以推荐这个方案，是因为我们要考虑用户的需求，用户买大屏手机的原因不是为了看大字符，但要查看更多内容。直接使用px是最明智的解决方案。使用vw、rem等布局方式没有错。然而，flex这种灵活布局在今天流行，如果你还用这种传统的思维去思考问题，显然有两个原因（我个人认为px最好，可能有大佬会用vw或者rem写出精美的排版，看不出来）。为了偷懒，不想做每款手机的适配，也不想学习新的布局方式，让flex等高级布局与你擦肩而过。2.3移动端适配过程1.在头部视口设置width=device-width'2。在CSS中使用px3。在合适的场景下使用flex布局，或者适配vw4.跨设备类型时使用mediaquery（pc<->手机<->平板）5.跨设备如果设备类型交互差异太大，考虑分开项目发展。上一次疫情期间，我就有了跳槽的念头。我询问了移动端的布局，发出美好愿望，梳理移动端适配，助力后来者抢占先机！参考[1]链接：https://github.com/w3c/csswg-drafts/issues/3720