响应式布局学习

1. 响应式布局简介

响应式布局是指通过判断设备类型、或设备的屏幕宽度来呈现不同的显示效果。
比如一个网页，在电脑端和手机端的显示是不一样的。

2. 媒体设备类型

常见的媒体设备类型有：screen、print等

在<style>或<link>中加入 media="print" / media="screen" 来指定样式应用的媒体类型

3. 简化

如果每个不同的样式表都要使用一个<link>来引入，那么页面将会变得非常乱
我们可以通过引入一个总的css样式表，
然后在该css文件中定义@import来引入不同的css文件：
@import url(hello.css) all/print/screen;

4. CSS使用媒体查询

@media screen and (max-width:600){
	//需要使用的样式
}

3. 实现媒体查询

3.1 写法

在头部定义整个css样式表：
media="screen and (max-width:768px)"

在css样式表中局部定义：
@media screen and (max-width:768px){
	//css语句
}

3.2 逻辑与

使用and关键词实现逻辑与
在css中引入：
media="screen and (max-width:768px) and (orientation:landscape)"

3.3 逻辑或

使用逗号‘，’实现逻辑或
在css中引入：
media="screen and (max-width:768px), screen and (min-width:768px)"	//768px被使用了两次，后面的权重大

3.4 逻辑非

使用关键字not实现逻辑非
在css中引入：
@media not screen and (max-width:768px){}

3.5 排除低版本浏览器不兼容媒体查询

使用关键字only来排除不兼容的浏览器
在css中引入：
@media only screen and (max-width:768px){}

4. 组件开发思想

在编写css样式的时候，可以通过对某一个部分的样式封装设计成一套class，
在html页面调用的时候直接引用class名称即可实现相对应的效果。
比如：
我对grid布局中，每个元素所占单元格的数量进行封装，
有col-3、col-4、col-5等，
在html中只要引用对应的class名字即可实现效果

5. 使用rem单位进行相应处理

通过设置html（或使用等价伪类:root）来设置全局的font-size，
1rem就等于全局的font-size。
因此，使用rem为单位，配合使用媒体查询和:root的font-size，
即可实现移动端的响应式布局。