响应式布局相关技术
—
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)