rem适配布局

rem适配布局+响应式布局
REM适配方案–布局
less语法 + rem适配布局

rem基础

-rem是一个相对html根元素字体大小的单位
-em是一个相对父元素字体大小的一个单位
-rem的优点 ：可以控制html的文字大小从而可以使得页面中的元素大小被整体控制

媒体查询

-html中的字体大小不应该写死 通过媒体查询来解决
-媒体查询可以i针对不同的屏幕尺寸设置不同的样式
-语法： @media mediatype and|not|only (media feature)
{
	css code
}
注意：1.@media 开头
	  2.mediatype 媒体类型： all【所有设备】、 print【用于打印机】、screen【用于电脑屏幕】
	  3.三个关键字 and  not only 
	  4.(media feature) 媒体特性 必须有小括号包含 ：with【设备页面可见区域的宽度】、min-with、max-with

	eg:
		        @media screen and (max-width:800px) {

            /* 在我屏幕上并且最大宽度是800px【小于等于800px】 设置我们想要的样式 */
            body {
                background-color: pink;
            }
        }


-媒体查询书写一般按照从小到大或者从大到小的顺序来
-媒体查询条件有多 用 and 连接
-数字后面必须跟单位

媒体查询和rem共同作用实现元素动态变化

-引入资源：屏幕在不同宽度尺寸时 用不同的css样式文件
原理：直接在link中判断设备的尺寸 然后引入不同的css文件
-eg：
    <link rel="stylesheet" href="第一个样式文件" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="第二个样式文件" media="screen and (min-width:720px)">