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

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

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

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

多媒体的类型 MediaType

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

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

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

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