媒体查询:只是一个工具,通过检测用户的设备的特性(屏幕分辨率、横屏竖屏)从而加载不同的样式表
媒体查询的写法: @media 设备的类型 连接符号 (媒体特性-表达式){css语法}
- @media 声明媒体查询的关键字
- 设备的类型 表示的含义是通过设备类型选中的设备特性是什么 电脑屏幕(screen、all)
- 连接符号 and (only、not)
- (表达式) min-width/max-width
- 声明
注意：
- 媒体查询是一段css样式
- 每一个英文单词之间都需要一个空格
- 判断条件结束后面不能加分号
扫描二维码关注公众号，回复：
13566121 查看本文章
- 如果有多个判断条件就可以在后面再去书写and即可
- 媒体查询建议写在样式表的最下方
- 由于市面上太多电脑的制作厂商 书写媒体查询的时候会有部分电脑有偏差
模板例子：
@media all and (max-width:320px){
html {font-size: 12px;}
}
@media all and (min-width:321px) and (max-width:375px){
html {font-size: 14px;}
}
@media all and (min-width:376px) and (max-width:414px){
html {font-size: 16px;}
}