移动端适配

时间 2019-11-07

标签移动适配栏目无线繁體版

原文原文链接

在说具体内容以前，咱们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比
在CSS中咱们通常使用px做为单位，须要注意的是，CSS样式里面的px和物理像素并非相等的。CSS中的像素只是一个抽象的单位，在不一样的设备或不一样的环境中，CSS中的1px所表明的物理像素是不一样的。在PC端，CSS的1px通常对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。css

Retina屏

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提升屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以令人肉眼没法分辨其中的单独像素。也被称为视网膜显示屏。html

Retina屏通常在苹果公司的产品上用的比较多，诸如MacBook、iPad、iPhone等浏览器

以MacBook Pro with Retina Display为例，工做时显卡渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍，但对于特殊元素，如视频与图像，则以一个图片像素对应一个屏幕像素的方式显示。故不会产生Windows中分辨率提高使屏幕文字与图像变小，形成阅读困难的问题。这样在设计软件时只需将全部的UI元素的精细度都提升到原来的4倍就能够既保持了观看温馨度，又提升了显示效果。less

2.物理像素(physical pixel)ide

物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每一个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个CSS像素对应的倒是4个物理像素（参照上面Retina屏的原理下文田字示意图理解）。布局

设备独立像素(device-independent pixel)

设备独立像素是咱们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。字体

设备像素比(device pixel ratio)

设备像素比简称为dpr，物理像素与设备独立像素的比例。网站

当这个比率为1:1时，使用1个设备像素显示1个css像素。当这个比率为2:1=2时，使用4(2-2)个设备像素显示1个css像素。当这个比率为3:1=3，使用9(3-3)个设备像素显示1个css像素。idea

这里要注意，dpr=2,并非物理像素是设备独立像素的2倍，而是用4个物理像素去表示1个设备逻辑像素应该说1个设备独立像素是1个物理像素的4倍，由于你4个网物理像素才表明我1个设备独立像素dpr只表明一个数字比例，不是倍数关系。spa

CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所表明的物理像素也会增长一倍；反之把页面缩小一倍，CSS中1px所表明的物理像素也会减小一倍。关于这点，在文章后面的1px细线问题部分还会讲到。

viewport

viewport就是设备上用来显示网页的那一块区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

在默认状况下，通常来说，移动设备上的viewport都是要大于浏览器可视区域的，这是由于考虑到移动设备的分辨率相对于桌面电脑来讲都比较小，因此为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或1024px（也多是其它值，这个是由设备本身决定的），但带来的后果就是浏览器会出现横向滚动条，由于浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

这里要认清三种视口

　1. visual viewport 可见视口，指屏幕宽度
　2. layout viewport 布局视口，指DOM宽度
　3. ideal viewport 理想适口，使布局视口就是可见视口即为理想视口

获取屏幕宽度(visual viewport)的尺寸：window. innerWidth/Height
获取DOM宽度(layout viewport)的尺寸：document. documentElement. clientWidth/Height

设置理想视口ideal viewport：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

该meta标签的做用是让layout viewport的宽度等于visual viewport的宽度，同时不容许用户手动缩放，从而达到理想视口。　

　meta[name="viewport"]里各参数的含义为：

　　width: 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”。

　　initial-scale: 设置页面的初始缩放值，为一个数字，能够带小数。

　　minimum-scale: 容许用户的最小缩放值，为一个数字，能够带小数。

　　maximum-scale: 容许用户的最大缩放值，为一个数字，能够带小数。

　　height: 设置layout viewport 的高度，这个属性对咱们并不重要，不多使用。

　　user-scalable: 是否容许用户进行缩放，值为“no”或“yes”。

rem适配

哇卡卡卡，终于说到移动端屏幕适配方案了，可能你们看的想骂娘了，不过别急啊，上面的东西弄不清楚，下面是适配也听不懂啊

rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，因此默认的1rem=16px，咱们能够根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不一样终端上以相对一致的视觉效果呈现。

事实上 rem是把屏幕等分红指定的份数，以20份为例，每份为 1rem ， 1rem 对应的大小就是 rem基准值，rem作的就是把 rem基准值给<html>的 font-size ，因此若是设备的物理像素宽为 640px ，分红20份，那么 1rem=640px/20=32px , <html>的 font-size为32px 。

//这段代码放在head标签里面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
 
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

固然，你也能够分红30份，40份，60份等等，这个看本身的喜爱了

在咱们实际切图的时候，对于视觉稿上的元素尺寸换算，只须要元素的原始的px值(即你量的大小) 除以 rem基准值便可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px* ，那么换算过来就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

这样咱们就能够用rem来代替像素px了，并且在全部的移动端都是自适应的

这个方法目前是比较好的适配方法，只是rem在计算时很麻烦，有不少小数，这个时候你们能够试一下用less.js解决rem的小数问题

rem+vw适配

什么是vw和vh?

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏状况，右侧为横屏状况）

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，若是浏览器不支持0.5px，那么实际渲染结果多是7px）

注意：这里的1%是指占视口的1%，而不是咱们定义的div的1%

如何利用rem+vw进行屏幕适配呢？咱们以设计稿为750px为基准

第一步：设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

第二步：设置html的font-size大小

html{
    font-size:13.33333333vw
}

为何font-size=13.33333333vw?

下面分析下原理吧, 上面咱们说了vw表示1%的屏幕宽度,而咱们的设计稿一般是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw,。

同时咱们知道rem,rem是相对html元素的字体大小，为了方便计算,咱们取html的font-size=100px,经过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了

因此，咱们让1rem=100px=13.333333vw

那么在项目上就很好地能够进行使用了

当咱们经过ps测量一个div的大小为 width:200px,height:137px时，咱们就能够这样写，ps量出来的像素直接除以100，计算小数很方便

div {
  width: 2rem;
  height:1.37rem;
 
 }

是否是相对于前面的rem适配来讲，不用去计算小数了呢？

做者：油炸皮卡丘
来源：CSDN
原文：https://blog.csdn.net/im_dogg... 版权声明：本文为博主原创文章，转载请附上博文连接！