移动端布局
标签（空格分隔）： 未分类
预备知识
-
Device Pixels设备屏幕的物理像素，硬件指标，这个就是指铺多少点,和编程关系不大。 -
dpr==dppx（Number of device pixels per CSS Pixel） 设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）。window.devicePixelRatio可以得到这个值 -
CSS Pixelsweb编程中的概念。所以，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等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
常规及技巧
-
一个典型的移动端布局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属性控制允许用户以怎样的方式放大或缩小页面
-
-
rem布局
- 设置
font-size.两种方式- 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写个函数自己转化。
