响应式布局相关技术viewport 、 @media 、 rem / em 、 vw / vh 、弹性盒子 flex

viewport 、 @media 、 rem / em 、 vw / vh 、弹性盒子 flex ……

一 viewport (meta 设置)

其他的技术可以选用，但使用 meta 控制 viewport 是必须的。

viewport 是设备的屏幕上能用来显示我们的网页的那一块区域，但并不局限于可视区域的大小，比如有滚动条的情况。

css 中的 1px 并不等于物理上的 1px，而用户缩放会引起 css 中 px 的变化，比如用户把页面放大一倍，那么 css 中 1px 所代表的物理像素也会增加一倍；反之把页面缩小一倍，css 中 1px 所代表的物理像素也会减少一倍。

那么在做响应式开发时，不同手机的屏幕大小不同，可视区域不同，而为了能以相同的样式来显示，需要让当前 viewport 的宽度等于设备的宽度，同时不再允许用户手动缩放。

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

属性名	备注
width	设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

二媒体查询（Media Query）

媒体查询是 CSS3 中提出的一个新概念，它允许为不同尺寸的视口设定不同的 css，为页面设置不同的媒体条件，并根据条件来应用相应的样式。媒体查询主要包括三部分内容，分别是媒体类型（media_type）、媒体特性（media_feature）和关键字，基本语法为：

media_query: [only | not]? <media_type> [ and expression ]*
expression : (media_feature [: value]?)

1. 媒体类型（media_type）

属性名	备注
all	所有设备
handled	小型或手提设备
print	打印机或显示屏设备上的打印预览模式
screen	显示屏设备

2. 媒体特性（media_feature）

属性名	备注
width	设备的视口宽度
height	设备的视口高度
device-width	设备的屏幕宽度
device-height	设备的屏幕高度
orientation	设备目前处于横向还是纵向状态
aspect-ratio	设备视口的宽度和高度的比例。如，16:9的显示屏aspect-ratio:16/9
device-aspect-ratio	设备的宽度和高度的比例
color	设备每种颜色的位数。如，min-color:32会检测设备是否拥有32位颜色
color-index	设备颜色索引表中的颜色值不能是负数

3. 关键字


and	关键字 and 用来把媒体类型和多个媒体特性的表达式组合起来，合并到同一条媒体查询中。只有当媒体类型和每个表达式的结果都为 true 时，查询结果才为 true
only	关键字 only用来限定范围，它将作用于整个查询结果
not	用来对整个查询结果取反

4. 用法示例

最常用的格式：

@media screen and （min-device-width: 100px） and (max-device-width: 300px){/* ...css... */}
@media screen and （min-width: 100px） and (max-width: 300px){/* ...css... */}

横屏状态：

@media screen and (min-width: 700px) and (orientation: landscape)

只对彩色显示屏设备有效，对其他任何设备均无效

@media only screen and (color)

使用 link 标签的 media 属性

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

CSS的 @import 指令:

@import url("reset.css") screen and (max-width: 360px);

三适合响应式布局的尺寸单位

1. rem 与 em

属性名	备注
rem	相对根级元素(html元素) fontSize 的倍数
em	相对父级fontSize的倍数

2. vw 与vh

属性名	备注
vw	相对于视窗的宽度，视窗宽度是100vw
vh	相对于视窗的高度，视窗高度是100vh

3. 百分比（%）

要注意的点：

1 border 不能设置百分比；border-radius 的百分比相对于自身的宽度。

2 子元素的 margin / padding 四个方向（top / right / bottom / left）的百分比相对于父元素的 width。

四弹性盒子 flex

这部分不想介绍了，请看这里 flex

以上的介绍只是常规性的使用方式，如有特殊场景，请百度各种技术的具体 API 和使用方法。

参考：viewport 、 MediaQuery

响应式布局相关技术