媒体查询:
概念:可根据设备(电脑/手机/终端设备)的尺寸,查询出适配自己的样式,可以根据用户的终端设备配对对应的样式;
共三种样式用媒体查询:
1、外部样式表媒体查询
--- link media="设备类型 and关键字 (这一定要空格) (媒体查询条件)"
2、@import方式
---
@import url(路径) 设备类型 and (媒体查询的条件);
---
3、内部样式表媒体查询
---
@media 设备类型 and (媒体查询的条件){ 执行的样式 }
---
响应式设计:
概念:就是一个网站能够兼容多个终端设备,怎么样才能兼容多个终端设备,还是得用媒体查询,所有响应式的基本原理还是利用媒体查询;
页面头部必须有meta声明:
viewport:
viewport 视口的设置;
device-width 设备的宽;
initial-scale 初始的缩放比值;
minimum-scale 最小缩放比;
maximum-scale 最大缩放比;
user-scalable 是否允许用户缩放 no 不允许用户缩放,yes 允许用户缩放;
媒体查询优点:
- 可以适应不同尺寸的设备;
- 灵活性强;
媒体查询缺点:
- 代码冗余;
- 兼容各设备适配工作大,效率低,影响加载速度;
- 影响视觉效果;