移动端布局

整理了一些相关的较为浅显的资料，也有自己整理的思考过程。具体的适配还需要阅读更多的书籍才能够完善。

1.相关概念

• CSS像素（DIP、虚拟像素、逻辑像素、设备独立像素）

  • CSS和JS使用的抽象单位，浏览器的CSS和JS都是以CSS像素为单位的，CSS像素的单位是px，具有相对性。

• 物理像素（DP、设备像素）

  • 如显示屏是由一个个物理像素点组成的，每个设备的物理像素点固定不变。单位是pt。1pt=1/72(inch)，1inch=2.54cm

• 设备像素比（dpr）

  • dpr= 物理像素/逻辑像素(未缩放状态下，物理像素和CSS像素的初始比例关系)

• viewport

  • layout viewport 布局视窗

  网站的宽度，可以通过document.documentElement.clientWidth获取，通过viewport meta标签设置

  • visual viewport——视觉视窗

  代表浏览器可视区域的大小，可以通过 document.documentElement.innerWidth或者window.innerWidth来获取

  • ideal viewport——理想视窗

  跟移动设备相关的viewport，移动设备的宽度。不需要用户缩放和横向滚动条就能查看网站的所有内容。ideal viewport没有固定的尺寸，不同的设备有不同的ideal viewport。

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

• font-size：css属性指定字体的大小。

  em:相对于父元素的字体大小的单位。

  rem:相当于根元素的字体大小的单位。

详情看：CSS像素等相关概念详解

2.移动端计算示例

我们所用的设计稿是基于IPhone6设计的，750px是IPhone6的设备像素。

假设要完成设计稿上400px的div

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

计算过程：

iPhone6的dpr=2，物理像素是750，所以理想视口为375px。

如果只针对iphone6，直接用400px/2即可。

3.问题

1.图片适配

Png、jpg等位图图像，需要一个像素点对应一个设备像素才清晰，而针对Retina屏一个逻辑像素对应多个设备像素，会使得图片比较模糊，所以原来100x 100的图在dpr=2的屏幕上需要放200x 200的图。

2.1px

即原来1px的边框对应的是2设备像素，所以看起来会很粗，且很多浏览器不支持0.5px的写法。

4.适配方案思考过程

1.viewport方案

如果是直接用viewport缩放，原750px的设计稿，对应375px的逻辑像素，让scale=1/dpr，这时候直接用设计稿中的尺寸即可，如设计稿是100px，写时写100px，对自动/2，即尺寸会自动变成50px。

750px/100px = deviceWidth / size

但是这会影响全局，且无法设定固定尺寸。

2.rem方案

• 如果不考虑对viewport进行缩放，直接让布局视口=理想视口

<meta name="viewport" content="width=device-width, initial-scale=1">

• 这时候以iphone6的标准设计图，宽是750px，以设计图为标准的html标签的font-size为100px，所以1rem=100px，所以设计图共有7.5rem。
• 以iphone6为例，布局视口为375px（宽度7.5rem），这时候对于html的font-size进行设置，即font-size*7.5=375px，所以font-size=50px。

document.documentElement.style.fontSize='${document.documentElement.clientWidth / 7.5}px'

• 这时候我们就可以直接将设计图的px换算成rem单位，即300px/100=3rem
• 这种方案就可以对需要缩放的元素使用rem，固定尺寸的直接使用px，但存在着1px问题以及图片适配问题。

3.改进版rem方案

①scale

由于dpr的存在，所以我们要进行缩放，缩小倍数=1/dpr

<script>
  var dpr = window.devicePixelRatio;
  var scale = 1 / dpr;
  document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+ scale +',maximum=scale='+ scale +',minimum-scale=' + scale + ',user-scalable=no');
  
  var $viewport = document.querySelector('meta[name="viewport"]');
  var content =  'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
</script>

现在布局的视口尺寸已经和设备像素一致了，只需要对设计稿进行等比缩放即可。

这时候1px css像素就严格等于1px 的设备像素，只针对iphone进行处理的原因具体可看再谈Retina下1px的解决方案

②rem

这时候由于scale的存在，以iphone6为例，font-size进行计算，此时font-size / dpr = 100/2 = 50px，所以我们用rem单位时候需要将100px的单位计算为100 x dpr / 100=100 x 2 /100 = 2rem。

font-size = layout viewport / designWidth x 100

这种方案是手淘的Flexible方案（也类似移动端高清、多屏适配方案)。

4.vw方案

vw也是相对单位，相对的是布局视口，1vw就是1%的布局视口宽度，rem方案就是在模拟vw

思想：（以iPhone6为例）

• 假设1vw = 1%的视口宽度，则750px = 100 vw，1vw = 7.5px
• 如果一个元素是100px，则 x (vw) * 7.5 = 100，则x = 100 / 7.5
• 详情看再聊移动端页面的适配

参考资料：

不要再问我移动适配的问题了

CSS像素等相关概念详解

使用Flexible实现手淘H5页面的终端适配