像素和布局

像素

• 设备像素：设备屏幕的物理像素。固定
• css像素：web开发时书写在css中的像素。随缩放可变

视口

• 在PC端 视口的宽度 = 浏览器窗口的宽度
• 在移动端，视口被分为两个：布局视口、视觉视口
• 移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（理想视口的尺寸因设备和浏览器的不同而不同）
• 可以将布局视口的宽度设为理想视口

布局视口

视觉视口

理想视口

理想的布局视口

设备像素比(DPR)

公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

meta标签

meta视口标签存在的主要目的是为了让布局视口和理想视口的宽度匹配

content 属性

1、width：设置布局视口的宽
2、init-scale：设置页面的初始缩放程度
3、minimum-scale：设置了页面最小缩放程度
4、maximum-scale：设置了页面最大缩放程度
5、user-scalable：是否允许用户对页面进行缩放操作

常用的meta标签实例

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
让布局视口的宽度等于理想视口的宽度，页面的初始缩放比例以及最大缩放比例都为1，且不允许用户对页面进行缩放操作。

媒体查询（响应式设计的基础）

1、检测媒体的类型，比如 screen，tv等
2、检测布局视口的特性，比如视口的宽高分辨率等
3、特性相关查询，比如检测浏览器是否支持某某特性

参考

一篇真正教会你开发移动端页面的文章(一)