媒体查询？

媒体查询（Media Query）是CSS3新语法 。

使用@media查询，可以针对不同的媒体类型定义不同的样式

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

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

目前针对很多苹果手机，Android手机，平板等设备都得到多媒体查询

语法规范：

@media mediatype and | not | only (media feature) {

       CSS-Code;

}

1.用@media开头 注意@符号

2.media type 媒体类型

 

3.关键字 and not only

4.media feature 媒体特性 必须有小括号包含

   

例如下面案例，根据页面宽度改变背景颜色

 浏览器在宽度小于540px的时候，背景颜色是蓝色，浏览器宽度在540px-970px之间，body的背景颜色是绿色，浏览器宽度大于970px的时候，背景颜色是红色。

媒体查询可以根据不同的屏幕尺寸改变不同的样式。

媒体查询+rem实现动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同的大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以实现不同设备宽度，实现元素大小的动态变化

案例：媒体查询+rem实现元素变化

    
    
    
    




    
购物车

当屏幕缩小跟放大时，它的高度跟宽度也会发生变化。