基本的移动端适配

为什么要适配移动端？

1. 一个项目一般拥有移动端和pc端的产品图
2. 我们为了减少工作量会在开发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毫米

单位使用

1. 相对单位的使用

• %：相对于父元素宽度

<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。

1. 绝对单位的使用

• px:像素 px 相对于设备显示器屏幕分辨率而言

div {
    height:100px;
    wight:100px;
}
复制代码

• pt:1 pt = 1/72 英寸
  
• pc:十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。
  
• in:英寸
  
• mm:毫米
  
• cm:厘米
  
• q:四分之一毫米
  

媒体查询

媒体查询故名思意，查询媒体类型来进行不同的操作

1. 语法

@media screen and (max-width: 300px) {
    样式表
}
复制代码

• screen为媒体类型
• max-width为媒体功能

1. 使用手册
   [传送门](CSS 媒体查询 (w3school.com.cn))