@media媒体查询 rem响应式布局 Web和H5页面自适应布局

前端开发中，@media媒体查询技术主要解决H5和web页面不同屏幕尺寸自适应样式布局的问题。

 用屏幕宽度600px为例子，以下为屏幕尺寸小于600px时应用的CSS样式

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

/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
		.img {
			width: 60px;
			height: 60px;
			margin: 0 auto;
		}
    
}

	

多媒体的类型 MediaType

all	适用于所有类型
print	适用于打印机和打印预览
screen	适用于电脑屏幕、平板电脑、智能手机等
speech	适用于屏幕阅读器

以下仅为最常用的媒体特性 Media Feature，可以根据业务需求自行使用。

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

 更多媒体特性种类：响应式设计——媒体特性（media feature）

CSS3中引入了新的样式单位rem，rem是相对长度单位。是根元素（html）的font-size值的一个css单位（适配单位rem）

html{font-size:10px;}
html完成根元素设置后，你可以定义响应式字体：
@media (max-width:600px){body{font-size:1rem;}}