为什么要适配移动端？
- 一个项目一般拥有移动端和pc端的产品图
- 我们为了减少工作量会在开发pc端时同时使它适配移动端
如何适配移动端
单位
在进行移动端适配的时候我们首先要考虑到元素单位的设置
- 相对单位
- %: 百分比
- em: Element meter 根据文档字体计算尺寸
- rem: Root element meter 根据根文档（ body/html ）字体计算尺寸
- ex: 文档字符“x”的高度
- ch: 文档数字“0”的的宽度
- vh: View height 可视范围高度
- vw: View width 可视范围宽度
- vmin: View min 可视范围的宽度或高度中较小的那个尺寸
- vmax: View max 可视范围的宽度或高度中较大的那个尺寸
- 绝对单位
- px: Pixel 像素
- pt: Points 磅
- pc: Picas 派卡
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 厘米
- q: Quarter millimeters 1/4毫米
单位使用
- 相对单位的使用
- %：相对于父元素宽度
<body> <div class="parent"> <div class="children"></div> </div> </body> <style> .parent { width: 100px } .children { width: 50% } </style> 复制代码
- em:相对于当前文档对象内文本的字体尺寸而言，
若未指定字体大小则继承自上级元素。
以此类推，直至 body，若 body 未指定则为浏览器默认大小。
body { font-size: 14px; } .element { width: 2em; /* 2em === 28px */ } 复制代码
- rem :根据根文档（ body/html ）字体计算尺寸
- vh:相对于可视范围的高度和宽度，可视范围被均分为 100 单位的 vh/vw
div { height: 10vh; /* 如果屏幕高度为1000px，则该元素高度为100px */ } 复制代码
- vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸
假设屏幕高度为960px，宽度为500px
div { height:1vmax; width:2vmin; } 复制代码
- 该盒子宽度为10px，高度为19.2px。
- 绝对单位的使用
- px:像素 px 相对于设备显示器屏幕分辨率而言
div { height:100px; wight:100px; } 复制代码
- pt:1 pt = 1/72 英寸
- pc:十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。
- in:英寸
- mm:毫米
- cm:厘米
- q:四分之一毫米
媒体查询
媒体查询故名思意，查询媒体类型来进行不同的操作
- 语法
@media screen and (max-width: 300px) { 样式表 } 复制代码
- screen为媒体类型
- max-width为媒体功能
- 使用手册
[传送门](CSS 媒体查询 (w3school.com.cn))
