移动端准备

媒体查询

@media screen and (max-width: 300px) {
body {background-color:lightblue;}}
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
all	用于所有设备
screen	用于电脑屏幕，平板电脑，智能手机等。

移动端准备项目

重点设置

viewport 是用户网页的可视区域 width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许用户缩放到最小的比例(默认为1.0) maximum-scale:允许用户缩放到最大的比例(默认为1.0) user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面) 物理像素:ps中世纪测量出来的像素大小 逻辑像素:css中应该写出来的像素大下 设备像素比:dpr = 物理像素/逻辑像素

常见单位

px:具体的像素单位
em:跟父元素的字体大小有关
rem:跟根元素的字体大小有关
视窗宽度:vw
100vw = 满屏宽度
视窗高度:vh
100vh = 满屏高度
 vmax:浏览器宽度和高度谁大听谁的
 vmin:浏览器宽度和高度谁小听谁的
 %	百分比