# 响应式布局的实现
响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。

## 媒体查询
通过使用`CSS`媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同`CSS`适配。

### 使用link链接

```html
<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" type="text/css" href="example.css" media="all and (max-width:600px)"/>
```


### 直接在CSS中使用
```html
<!--
@media mediatype and|not|only (media feature){
    /* css样式 */
}
-->
<div id="t1"></div>
<style type="text/css">
    @media screen and (min-width:600px){ 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) { 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>
```

### 使用@import导入
```css
/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);
```

### 媒体类型
* `all`: 用于所有设备。
* `print`: 用于打印机和打印预览。
* `screen`: 用于电脑屏幕，平板电脑，智能手机等。
* `speech`: 应用于屏幕阅读器等发声设备。

### 逻辑操作符
* `and`: 表示且，当所有的条件满足的时候返回`true`。
* `not`: 是用来排除某种制定的媒体类型。
* `only`: 用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
* `,`: 逗号用于将多个媒体查询合并为一个规则，逗号分隔效果等同于`or`逻辑操作符。

### 媒体功能
* `aspect-ratio`: 定义输出设备中的页面可见区域宽度与高度的比率。
* `color`: 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于`0`。
* `color-index`: 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于`0`。
* `device-aspect-ratio`: 定义输出设备的屏幕可见宽度与高度的比率。
* `device-height`: 定义输出设备的屏幕可见高度。
* `device-width`: 定义输出设备的屏幕可见宽度。
* `grid`: 用来查询输出设备是否使用栅格或点阵。
* `height`: 定义输出设备中的页面可见区域高度。
* `max-aspect-ratio`: 定义输出设备的屏幕可见宽度与高度的最大比率。
* `max-color`: 定义输出设备每一组彩色原件的最大个数。
* `max-color-index`: 定义在输出设备的彩色查询表中的最大条目数。
* `max-device-aspect-ratio`: 定义输出设备的屏幕可见宽度与高度的最大比率。
* `max-device-height`: 定义输出设备的屏幕可见的最大高度。
* `max-device-width`: 定义输出设备的屏幕最大可见宽度。
* `max-height`: 定义输出设备中的页面最大可见区域高度。
* `max-monochrome`: 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
* `max-resolution`: 定义设备的最大分辨率。
* `max-width`: 定义输出设备中的页面最大可见区域宽度。
* `min-aspect-ratio`: 定义输出设备中的页面可见区域宽度与高度的最小比率。
* `min-color`: 定义输出设备每一组彩色原件的最小个数。
* `min-color-index`: 定义在输出设备的彩色查询表中的最小条目数。
* `min-device-aspect-ratio`: 定义输出设备的屏幕可见宽度与高度的最小比率。
* `min-device-width`: 定义输出设备的屏幕最小可见宽度。
* `min-device-height`: 定义输出设备的屏幕的最小可见高度。
* `min-height`: 定义输出设备中的页面最小可见区域高度。
* `min-monochrome`: 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
* `min-resolution`: 定义设备的最小分辨率。
* `min-width`: 定义输出设备中的页面最小可见区域宽度。
* `monochrome`: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于`0`。
* `orientation`: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
* `resolution`: 定义设备的分辨率。
* `scan`: 定义电视类设备的扫描工序。
* `width`: 定义输出设备中的页面可见区域宽度。

## 单位
### 百分比单位
当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。  
* 子元素的`height`或`width`中使用百分比，是相对于子元素的直接父元素，`width`相对于父元素的`width`，`height`相对于父元素的`height`。
* 子元素的`top`和`bottom`如果设置百分比，则相对于直接非`static`定位的父元素的高度，同样子元素的`left`和`right`如果设置百分比，则相对于直接非`static`定位父元素的宽度。
* 子元素的`padding`如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的`width`，而与父元素的`height`无关。
* 子元素的`margin`如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的`width`。
* 设置`border-radius`为百分比，则是相对于自身的宽度，还有`translate`、`background-size`等都是相对于自身的。

### em单位
`em`是相对长度单位，相对于当前对象内文本的字体尺寸，若未设置则相对于浏览器默认字体尺寸`16px`，`em`是会继承父元素的字体的尺寸，使用时需要重新计算子元素的`em`值避免`1.2*1.2=1.44`的现象，使用`em`可以使元素根据字体大小的动态调整来制作响应式布局。

### rem单位
`rem`单位都是相对于根元素`html`的`font-size`来决定大小的,根元素的`font-size`相当于提供了一个基准，当页面的`size`发生变化时，只需要改变`font-size`的值，那么以`rem`为固定单位的元素的大小也会发生相应的变化。因此，如果通过`rem`来实现响应式的布局，只需要根据视图容器的大小，动态的改变根元素的`font-size`即可。

### vh vw vmin vmax
* `vh`: 相对于视窗的高度，`1vh`等于视窗高度的`1%`。
* `vw`: 相对于视窗的宽度，`1vw`等于视窗宽度的`1%`。
* `vmin`: `vw`和`vh`中的较小值。
* `vmax`: `vw`和`vh`中的较大值。

### 缩放比例
通过动态地控制网页视图的缩放比例来制作响应式布局。
```html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
```

## 自适应布局
自适应布局一般是通过检测`User-Agent`来判断当前访问的设备是`PC`端还是平板或者是手机，或者是通过检测窗口分辨率而请求服务器，从而服务端重定向或者返回不同的页面，需要开发多个页面来适应不同的设备，通常自适应布局与响应式布局并不是单独使用的，可以通过开发一套`PC`端页面与一套移动端页面来实现自适应布局，而两套页面都实现对于不同范围分辨率的响应式布局，可以避免过大的`CSS`样式表又可以获得较好的浏览体验，


## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```

## 参考
```
https://www.w3.org/TR/css3-mediaqueries/
https://juejin.im/post/5caaa230e51d452b672f9703
https://www.cnblogs.com/yanayana/p/7066948.html
https://www.cnblogs.com/jianxian/p/12808363.html
https://www.runoob.com/cssref/css3-pr-mediaquery.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
```