162.

时间:2021-6-12 作者:qvyue

响应式布局相关技术

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)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。