响应式布局相关技术
—
title: 响应式布局相关技术
tags: css
—
viewport 、 @media 、 rem / em 、 vw / vh 、弹性盒子 flex ……
***
{% asset_img response-layout.png 响应式布局相关技术 %}
## 一 viewport (meta 设置)
其他的技术可以选用，但使用 meta 控制 viewport 是必须的。
viewport 是设备的屏幕上能用来显示我们的网页的那一块区域，但并不局限于可视区域的大小，比如有滚动条的情况。
css 中的 1px 并不等于物理上的 1px，而用户缩放会引起 css 中 px 的变化，比如用户把页面放大一倍，那么 css 中 1px 所代表的物理像素也会增加一倍；反之把页面缩小一倍，css 中 1px 所代表的物理像素也会减少一倍。
那么在做响应式开发时，不同手机的屏幕大小不同，可视区域不同，而为了能以相同的样式来显示，需要让当前 viewport 的宽度等于设备的宽度，同时不再允许用户手动缩放。
“`html
“`
| 属性名 | 备注 |
|:—–|:—–|
| 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]? [ and expression ]*
expression : (media_feature [: value]?)
“`
### 1. 媒体类型（media_type）
| 属性名 | 备注 |
|:—–|:—–|
| all | 所有设备 |
| handheld | 小型或手提设备 |
| 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. 用法示例
最常用的格式：
“`css
@media screen and （min-device-width: 100px） and (max-device-width: 300px){/* …css… */}
@media screen and （min-width: 100px） and (max-width: 300px){/* …css… */}
“`
横屏状态：
“`css
@media screen and (min-width: 700px) and (orientation: landscape)
“`
只对彩色显示屏设备有效，对其他任何设备均无效
“`css
@media only screen and (color)
“`
使用 link 标签的 media 属性
“`html
“`
CSS的 @import 指令:
“`css
@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](https://www.cnblogs.com/xiaobaiv/p/9020335.html)
***
以上的介绍只是常规性的使用方式，如有特殊场景，请百度各种技术的具体 API 和使用方法。
参考：[viewport](https://blog.csdn.net/qq_42039281/article/details/83281074) 、 [MediaQuery](https://blog.csdn.net/ixygj197875/article/details/79365768)
点击咨询 