css多媒体查询

目录

1.rem基础

2.多媒体查询

3.语法格式

4.引入资源

5.简单实例

效果：

（可视窗口宽度小于480px）

 （可视窗口宽度大于480px）​

---

1.rem基础

（1）单位：相对单位（类似em，em是父元素字体大小）

rem是相对于html元素的字体大小

2.多媒体查询

（1）使用@media查询，可以针对不同样式

（2）@media可以针对不同的屏幕尺寸设置不同的样式

（3）当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染

（4）目前针对很多苹果、安卓手机，平板都用得到多媒体查询

3.语法格式

@media mediastyle and|not|only （mediafeature） {
    css-code；
}

（1）用@media开头要注意@符号

（2）mediatype媒体查询类型

• all 用于所有设备
• print 用于打印机和打印预览
• screen 用于电脑屏幕，平板，手机等
• speech 用于屏幕阅读器

（3）关键字

• and “且”连接多个多媒体特性
• not  “非”排除某个多媒体特性

• only “特定”某个特定多媒体特性

4.引入资源

针对不同媒体使用不同的sheetstyles

（在link中判断设备的尺寸，然后引用不同的css）

5.简单实例

 
 



    
如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

效果：

（可视窗口宽度小于480px）

 （可视窗口宽度大于480px）