手机端 4-2

px：我们开发时的单位

媒体查询(@media):可以设置不同的媒体类型和不同尺寸的样式

@media mediatype and/no/only (media feature){

代码块

}

媒体类型（mediatype）:多个媒体类型用逗号隔开，表示或的意思

screen:带有屏幕的设备，不局限与手机端，我们开发一般也是这个类型

print:用于打印机和打印预览

speech：屏幕阅读器

all：用于所有设备

关键字：将媒体类型和媒体特性（一个或多个）连接作为媒体查询的条件

and:是且的意思，要同时符合媒体类型和媒体特性

no：是非的意思，就是除了该媒体特性

only：是仅的意思，及指定该媒体类型，部分老浏览器可能因兼容性问题，需要在媒体类型中添加only

媒体特性：设置不同媒体设备的展示风格（用（）包含媒体特性）

wdith：设备中页面可见的宽度

max-width：设备中可见的最大宽度

min-width：设备中可见的最小宽度

height：设备中页面可见的高度（不常用）

max-height：设备中可见的最大高度

min-height：设备中可见的最小高度

eg：@media only screen and （max-width：780px）and{min-width：320px}{

body {

background：red

}

}

//当屏幕小于或等于780px且大于等于320px时的带屏幕的设备的body的背景颜色为red

rem + @media：实现元素动态改变大小（效果见代码动态改变元素大小）

引入媒体查询资源方式：<link rel=”stylesheet” href=”./css/media320.css” media= “screen and (min-width:320px)”>(效果见代码媒体查询引入)，不推荐使用，因为移动端屏幕尺寸有很多，所以要写许多css文件

rem 适配方案

rem 适配：元素尺寸由rem设置，所以元素尺寸会随html字体大小发生改变，从而实现等比例缩放的适配效果

rem + 媒体查询 + less（效果见代码rem适配1）