移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件

rem基础

文字大小随着页面自适应
页面元素宽高等比例随着页面自适应

rem单位
rem（root em ）是一个相对单位，rem的基准是html元素的字体大小。
em是父元素字体大小。
rem的优点：可以通过修改html里面的文字大小来改变页面元素的大小，可以整体控制。

媒体查询

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

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

语法规范：
@media mediatype and|not|only （media feature）{
css-code；
}

• 用@media开头 一定要有@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性，必须由小括号包含。

mediatype 媒体类型
将不同的终端设备划分为不同的类型，称为媒体类型。

值	说明
all	用于所有设备
print	用于打印机或打印预览
scree	用于电脑屏幕，平板电脑，智能手机等。

关键字 and not only

• and ：将多个媒体特性连接在一起。
• not ： 排除某个媒体类型。
• only ： 指定某个特定的媒体类型。

media feature 媒体特性

值	说明
width	定义输出设备中页面可见区域的宽度
max-width	定义输出设备中页面可见最大区域宽度
min-width	定义输出设备中页面可见最小区域宽度

媒体查询案例–背景变色

<style>
			/* 设置宽度是要用: 不要使用= */
			@media screen and (max-width:539px){
				body{
					background-color: blue;
				}
			}
			@media screen and (min-width:540px) and (max-width:969px){
				body{
					background-color: green;
				}
			}
			@media screen  and (min-width:970px){
				body{
					background-color: red;
				}
			}
		</style>

screen，and不能省略；
利用层叠性第二步的(max-width:969px)可以省略，简化代码，一样能达到效果。

引入资源
引入不同的css文件