这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战
为什么要适配移动端？
- 一个项目一般拥有移动端和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))