你必须知道的移动端适配知识-ZOL问答

4个回答默认排序

默认排序

按时间排序

没找到满意答案？去问秘塔AI搜索

取消复制问题

已采纳

1、相关概念在学习移动端之前，我们先来学习—些基础的概念和专有名词，这些知识会帮助我们更深刻理解移动端适配。
1.1、屏幕相关1.1.1、屏幕大小屏幕大小指屏幕主对角线长度，单位是英寸(inch)。常见的尺寸有：4.7寸、5.0寸、5.5寸、6.1寸等等。至于说为什么不用宽高来表示屏幕大小，这是因为国外最早的手机厂商就没用宽高来表示，英寸也是国外常见的长度单位。

1.1.2、屏幕分辨率分辨率是指屏幕在横向、纵向上所拥有的物理像素点总数。一般用x*y表示。例如iphone13pro的屏幕分辨率为2532x1170
注意点：屏幕分辨率是一个固定值，当屏幕被生产出来时就已经固定了！
1.2、像素相关1.2.1、物理像素又称:设备像素物理像素是一个长度单位，单位是px，1个物理像素就是屏幕上的一个物理成像点，就是屏幕中一个微小的发光物理元器件（可简单理解为超级微小的发光灯泡)，是屏幕能显示的最小粒度。它由屏幕制造商决定，屏幕生产后无法修改。例如iPhone6的横向上拥有的物理像素为750、纵向上拥有的物理像素为1334，我们也可以用:750*1334表示。

不管像素长什么样。它一定是由red、green、blue这三种颜色组成

1.2.2、css像素又称:逻辑像素,单位也是px，它是为Web开发者创造的，用来精确的度量Web页面上的内容大小。我们在编写css、js、less(css预编译器)中所使用的都是css像素（可以理解为:“程序员像素)思考∶我代码中所写的1px(css像素)，到了屏幕上到底对应几个物理像素呢?是1个css像素就对应1个物理像素(“发光的灯泡)吗?要探讨这个对应关系，就要学习接下来的新概念∶设备独立像素。
1.2.3、设备独立像素设备独立像素简称DP(device-independentpixel)，又称:屏幕密度无关像素。
在没出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高，显示效果就会更佳细腻。苹果将这种屏幕称为:Retinadisplay(又名:视网膜屏幕)，与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。

这张图是发布会现场的概念图，我们可以看到两个大小相等的盒子，里面的方块就表示着像素，左边的像素块很明显大于右边的像素块，同样大小的一块区域，由更多的像素点呈现，画面就会更加精致
但同样尺寸的屏幕压入更多的像素，那么像素的大小自然要发生变化，同样是css代码中2x2的盒子，iphone3的盒子要大于iphone4的盒子，那么怎么实现呈现在我们面前大小相等的效果的呢？设备独立像素应运而生。我们代码中写的css像素会转换为设备独立像素，而设备独立像素又会转换为屏幕上的物理像素。css像素与设备独立像素之间的关系
在无缩放的情况下，1css像素等于1设备独立像素设备独立像素与物理像素之间的关系
普通屏幕下1个设备独立像素等于1个物理像素
高清屏幕下1个设备独立像素等于N(N1)个物理像素

1.2.4、设备像素比(dpr)像素比(dpr):单一方向上设备【物理像素】和【设备独立像素】的比例。即:dpr=物理像素/设备独立像素，在浏览器中用window.devicePixelRatio获取，在css中用device-pixel-ratio。几款手机的屏幕像素参数，点击查看更多

1.2.5、像素之间的关系在不考虑缩放的情况下
普通屏(dpr=1)：1css像素=1设备独立像素=1物理像素
高清屏(dpr=2)：1css像素=1设备独立像素=2物理像素
普通屏(dpr=3)：1css像素=1设备独立像素=3物理像素
1.3、视口相关1.3.1、布局视口布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。pc端布局视口一般都为:960px~1024px这个范围。而这个范围也是版心的位置，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去盛装pc端的网页，这容器的宽度一般是980px，不同的设备可能有所差异，但相差并不大;随后将这个容器等比例压缩到与手机等宽，这是早期将PC端网页移植到移动端的办法。可以通过document.documentElement.clientWidth来获取布局视口的大小
1.3.2、视觉视口视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但是这个宽度里所包含的css像素值是变化的，例如:一般手机会将980个css像素（即布局视口这个容器）压缩放入视觉视口中，而ipadPro会将1024个css像素放入视觉视口中。移动端获取视觉视口方式:window.innerwidth，不过在Android2、Operamini、UC8中无法正确获取。
1.3.3、理想视口与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准:让布局视口宽度与屏幕等宽(设备独立像素)，靠meta标签实现。
理想视口的特点:
布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后:设备独立像素:375px，布局视口宽度:375px。
用户不需要缩放、滚动就能看到网站的全部内容。
要为移动端设备单独设计—个移动端网站。
设置理想视口的具体方法:metaname=viewportcontent=width=device-width
1.3.4、缩放PC端放大时：视口变小，那么就相当于可见范围变少，但为了视口占满我们的屏幕，会等比例放大视口，那么里面的内容也被随之放大
缩小时：视口变大，那么就相当于可见范围变少，但为了视口占满我们的屏幕，会等比例缩小视口，那么里面的内容也被随之缩小
移动端放大时：布局视口不变，视觉视口变小
缩小时：布局视口不变，视觉视口放大?所以移动端缩放屏幕时，并不会改变布局
2、适配2.1、为什么需要适配由于移动端设备的屏幕尺寸大小不一，会出现:同一个元素，在两个不同的手机上显示效果不一样(比例不同)。要想让同一个元素在不同设备上，显示效果一样，就需要适配，无论采用何种适配方式，中心原则永远是:等比!。
2.2、适配方案2.2.1、remrem是css中的长度单位，且rem是相对于根元素的字体大小。rem适配的原理：编写时统一以rem为单位，在不同设备上动态调正字体大小具体方案：
方案一(淘宝、百度方案)1、通过js设置根字体大小：(当前设备横向独立像素值X100)/设计稿宽度2、编写样式时，直接以rem为单位，值为：设计值/1003、增加js代码进行实时适配

以上图为例，以iphone6为基准，它的设备独立像素(设计稿宽度)为375px，我们将根元素的字体大小设为100px(方便计算)，那么就有1rem=100px。我们需要一个在这个设备独立像素下的345px的盒子，以rem为单位的话，就是345px/100px=3.45rem，转换到其他设备3.45rem不变，只需要改变rem的值，因为ihone6的设备宽度除以ihone6plus的设备宽度的值与ihone6的rem值除以ihone6plus的rem值互成比例，那么ihone6plus的rem值就为(当前设备横向独立像素值X基准设备横向独立像素100px)/设计稿宽度可以通过一段js代码来动态设置根字体大小
constadaptor=()={//获取布局视口宽度constdp=document.documentElement.clientWidth//计算得到当前设备的根字体大小constrootFontSize=(dp*100)/375document.documentElement.style.fontSize=rootFontSize+'px'}adaptor()window.addEventListener('resize',adaptor)
345px的盒子的也应写成3.45rem，这样就实现了rem适配
方案二(搜狐、唯品会方案)方案二与方案一的不同之处在于rem设为设备横向独立像素/10，以ihone6为设计稿，那么1rem=37.5px，345px的盒子转换为rem单位为345px/37.5px=9.2rem。动态控制根字体大小的js代码如下
constadaptor=()={constdp=document.documentElement.clientWidthconstrootFontSize=dp/10document.documentElement.style.fontSize=rootFontSize+'px'}adaptor()window.addEventListener('resize',adaptor)
你肯定会好奇，这个方案写样式时计算特别麻烦，设计稿宽度/37.5无法心算出来，难不成还需要每次都拿计算器出来？这个方案二有存在的必要吗？这是因为方案一的rem值特别大，我们设置字体或者其他样式时，特别不方便，而方案二的rem值较为适合，而且我们还可以引入css预编译器设置css变量，那么我们写样式时只需要用设计稿的大小与这个变量运算即可。这里以less为例：
/*index.html*/divclassName=wrapper/div/*index.less*/@basic:375/10rem;`/*新版less运算一定要带括号*/`.wrapper{width:(345/@basic);height:(150/@basic);margin:0auto;margin-top:(15/@basic);background-color:lightblue;}
2.2.2、vw适配vw全称viewportwidth，是视觉视口的宽度等分为100份之后的大小。这个单位就相当于rem适配原理中将视窗划分为100的情况，相比较rem适配方案的优点是省去了处理rem的步骤。缺点是兼容性较差，不过现在兼容性都没什么大问题了

现在我们来看看如何使用vw适配：也是用rem适配中的例子，以iphone6为基准，设备独立像素为375px，那么1vw=3.75px。345px的盒子转为vw单位345/3.75=92vw，计算的步骤也可以交给css预编译器来进行。不同设备横向独立像素不同，vw值自然也不同，所以会很方便的完成等比例缩放。?使用vw适配不需要js代码，减少了css和js的耦合度，vw适配也是未来的趋势。

取消评论

c792483724

translateZ(0)触发硬件加速，这些血泪经验都是被线上事故逼出来的啊！

取消评论

quanyue

哎呀说到移动端适配我真的踩过太多坑了！以前写页面在iPhone上好好的，一到安卓机就字体炸开、按钮错位，后来才知道viewport那行meta标签根本不是摆设，width=device-width必须加上，还有rem方案得配合postcss-pxtorem自动转，再加上媒体查询做断点分层，不然大屏小屏全挤一块儿。对了，别忘了iOSSafari的input聚焦时页面缩放bug，加个viewportmaximum-scale=1才稳，这些细节不抠清楚，测试那边天天找你改bug！

取消评论