1、rem基础

em：父元素字体大小

rem:基于html的文字大小

rem可以通过改变html的文字大小来改变页面中元素的文字大小。

2、媒体查询

@media 媒体查询（css3的新增属性）

  • 可以针对不同的媒体类型定义不同的样式

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

  • 目前针对很多设备使用媒体查询（苹果、安卓）

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

css - code

}

@media开头

mediaType :媒体类型

all：所有设备

print：用于打印设备

screen：用于电脑屏幕，手机，平板。

关键字： and | only | not

media feature 媒体特效，必须有小括号

@media screen and (max-width:800px){
   
   .body{
   
       backgound:red
   }
}

3、媒体查询，根据不同的屏幕引入不同的资源

可以准备多套cs文件根据不同的浏览器页面宽度，来显示不同的样式（建议从小到大引入样式，后面的会覆盖前面的引入）

<!- 宽度小于320px触发->
<link rel='stylesheet' href='style320.css' media='screen and (min-width:320px)'>
<!- 宽度小于640px触发->
<link rel='stylesheet' href='style320.css' media='screen and (min-width:640)'>

4、rem适配

原理：根据不同的设备使用@media 动态的获取设备宽度，修改html的文字大小。在通过rem动态的根据html获取对应宽高。

技术方案

  • 技术方案一

    • less

    • 媒体查询

    • rem

  • 技术方案二(推荐)

    • flexible.js

    • rem