rem适配

rem适配

rem (root em)和em的区别：

• em是相对与父元素的字体大小来说的## 标题
• rem是相当于HTML元素的字体大小
• rem的优点就是可以通过修改HTML里面的文字大小来改变页面中元素的大小可以整体控制

媒体查询（Media Query）

• css3最新样式

• 可以根据不同的屏幕尺寸设置不同的样式

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

    css-Code;
  

  }

• 用@media开头注意@符号

• mediatype媒体类型

• 关键字 and not only

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

媒体类型：(必须带上不能省略！！！)

值	解释说明
all	所有设备
print	打印
sree	电脑屏幕，平板电脑

关键字：

• and: 将多个媒体特性连接在一起，相当于且
• not : 排除某个特性 相当于非
• only:指定某个媒体类型

媒体特性：

值	解释说明
width	页面可见区域
min-width	页面可见最小区域宽度
max-wi	页面可见区域最大宽度

在屏幕上并且最大宽度为800像素 背景颜色为#0000FF

  @media screen and (max-width: 800px){
    			body{
    				background-color: #0000FF;
    			}
    		}

• 媒体查询一般按照从大到小，或者从小到大的顺序（划分不同区域）
• 从小到大代码会能简洁

引入资源

• 当样式比较多，针对不同的stylesheets，引入不同的css文件（直接在link中判断）

 <link rel="stylesheet" type="text/css" href="" media mediatype and|not|only (media feature)/>