版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39141044/article/details/82656905
一、响应式布局
针对不同的屏幕尺寸设置不同的样式，是为了解决移动互联网的问题而诞生的。响应式布局是解决移动端设备屏幕尺寸不同的问题。
响应式布局的优缺点
优点：
- 面对不同分辨率设备灵活性强。
- 能够快捷解决多设备显示适应问题。
缺点：
- 兼容各种设备工作量大，效率低下。
- 代码累赘，会出现隐藏无用的元素，加载事件加长。
响应式是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果。
二、媒体查询
媒体查询是响应式布局方法之一，使用@media（媒体查询）可以使页面在不同的终端设备、不同的屏幕尺寸下达到不同的渲染效果。
@media使用方法
第一步
先在给页面添加兼容移动设备的meta头。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
第二步
在CSS文件中添加媒体查询语句
@media mediatype and|not|only (media feature) {
CSS-Code;
}
参数说明
mediatype常用
| 值 | 说明 |
|---|---|
| all | 用于所有设备 |
| screen | 用于电脑屏幕、平板电脑、智能手机 |
media feature常用
| 值 | 说明 |
|---|---|
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
min-width和max-width的使用
@media (max-width: 767px) {} //screen <=767的设备
@media (min-width: 768px) {} //768<= screen的设备
@media (min-width: 992px) {} // 992<= screen的设备
@media (min-width: 1200px) {} // 1200<= screen 的设备
//或者
@media (max-width: 1199){ // screen<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
//混合使用
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) { }
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ }
@media only screen and (max-width: 479px) { }