移动端布局

标签（空格分隔）： 未分类

预备知识

• Device Pixels 设备屏幕的物理像素，硬件指标，这个就是指铺多少点,和编程关系不大。
• dpr==dppx （Number of device pixels per CSS Pixel） 设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）。 window.devicePixelRatio可以得到这个值
• CSS Pixels web编程中的概念。所以，1个CSS像素在不同设备上可能对应不同的物理像素数，这个比值是设备的属性（Device Pixel Ratio，dpr)
  在CSS规范中，长度单位可以分为绝对单位和相对单位。px是一个相对单位，相对的是设备像素（Device Pixels）。比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px
• viewport 在没有缩放的情况下，屏幕的CSS像素宽度其实是指理想视口的宽度，而meta标签：
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  指定了布局视口=理想视口，并且禁止缩放。所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了

现在知道为啥子移动端会出现1px问题了吧

关于设计稿

因为存在不同比例的尺寸的手机，设计师不可能对每个尺寸手机进行设计稿还原，一般来说，以ip6尺寸为宜。下面举例的时候以ip6为准。

ip6数据

尺寸

css Pixels :375667 这个就是你写代码的时候的尺寸
device Pixels: 7501444 设计稿尺寸(注意/2)
dpr:2 表示1个css像素宽度等于2个

设计稿 ==> 静态页面

由上面例子我们可以看出，设计稿尺寸和css尺寸是有个2倍关系的，所以写css的时候无脑/2

• 问题：我们拿到设计稿如何还原尺寸？

文字流式，控件弹性，图片等比缩放。

布局示例图

解释： 控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。

常规及技巧

1. 一个典型的移动端布局meta头
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   逐个属性解释

   • width=device-width让屏幕看宽度等于设备宽度，简单点理解就是让手机浏览器的宽度适应手机屏幕
   • initial-scale=1 默认缩放比例
   • maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面

2. rem布局

   • 设置font-size.两种方式
     1. js设置

   document.addEventListener('DOMContentLoaded', function(e) {
               document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
   

    2. css设置
   

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 37.5px;}
}
```
+ 转化尺寸
根据比例图转化尺寸，这一步没啥说的，你可以摆个计算器算，也可以用scss或者less写个函数自己转化。

参考资料

rem和设计稿
移动端适配多种设计稿
手淘适配方案
flexiable使用
1px问题