移动端之REM和媒体查询

rem 单位：是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是相对于HTML元素的字体大小。比如：根元素设置font-size = 12px，非根元素设置width：2rem；则换成px表示就是24px

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

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

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

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

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

语法规范：

        @media mediatype and|not|only（mediafeature）{

        CSS-Code；

}

   注意：用@media开头注意@符号

        mediatype 媒体查询

        关键字 and not only

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

mediatype 查询类型

 关键字：

        and：可以将多个媒体特性连接到一起，相当于“且”的意思

        not：排除某个媒体类型，相当于“非”的意思，可以省略

        only:指定某个特定的媒体类型，可以省略

媒体特性：

        width：定义输出设备中页面可见区域的宽度

        min-width：定义输出设备中页面最小可见区域宽度

        max-width：定义输出设备中页面最大可见区域宽度

 

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

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

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

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