h5 day16笔记 2021.09.06

媒体查询:只是一个工具,通过检测用户的设备的特性(屏幕分辨率、横屏竖屏)从而加载不同的样式表

媒体查询的写法: @media 设备的类型 连接符号 (媒体特性-表达式){css语法}

- @media 声明媒体查询的关键字

- 设备的类型 表示的含义是通过设备类型选中的设备特性是什么 电脑屏幕(screen、all)

- 连接符号 and (only、not)

- (表达式) min-width/max-width

- 声明

注意：

- 媒体查询是一段css样式

- 每一个英文单词之间都需要一个空格

- 判断条件结束后面不能加分号

- 如果有多个判断条件就可以在后面再去书写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;}

}