移动端适配

移动端适配

---

一、移动端适配

1.一些概念理解

1.rem和em的区别
两者都是相对单位，rem以html的font-size作为参照物设置标签大小；em以父元素的font-size作为参照物设置标签大小，这和百分比类似。因此em % vh vw它们更适合小范围的使用，不适合大篇幅使用。

2.px为什么不能进行适配？
px是css像素（逻辑分辨率），是前端的一个尺寸单位；物理像素，是由一个个的像素点构成的整个屏幕，每个屏幕的物理像素点是一定的。针对1px的css像素去覆盖占用的物理像素点，是动态变化的。当屏幕变大，也就是物理像素点变大了，这只会导致1px所占用的物理像素点减少；反之，则导致1px所占用的物理像素点变多。然而！这就表示无论，屏幕大小怎么变化，物理像素点怎么变化，这跟px没有任何关系！应该是50px的宽度，无论屏幕怎么变大变小，永远都是一样的大小。所以这就是px不能进行适配的原因。

3.@media媒体查询 + rem可利用的插件
计算公式：html中font-size大小*rem单位的标签大小=px单位的标签大小
如果手动每次设置大小都自己计算，这太累了！vscode中有插件：px to rem & rpx (cssrem),在插件的扩展中，可以设置基准的font-size，以及css分辨率和规定屏幕宽度。

4，响应式页面和移动端页面区别
响应式页面：页面的布局结构(样式等)会随着页面大小的变化而变化。
移动端页面：页面元素的大小会随着手机尺寸大小的变化而变化，而布局样式等不发生改变。

2，移动端适配的方案

1. 百分比单位：布局采用百分比的形式进行书写。（缺点：每一级父元素都必须设置宽高）

2. vh和vw单位：vw（view width）/ vh (view height) , 它们始终都是以浏览器的可视区域大小为参照物。视口（viewport）将整个浏览器的宽度视为100vw，不管浏览器有多宽，始终都是100vw。不管浏览器有过高，始终都是100vh。是一个相对单位。。（缺点：始终需要以窗口作为参照物设置大小）
3. 弹性布局：利用弹性布局的时候可以对子元素进行缩放，因此这里可以正常设置px单位

4. @media媒体查询+rem组合：(常用)

1. html根标签font-size单位px + @media媒体查询 + rem：

 <!-- 
    步骤：
    1. 将任意一个大小的手机屏幕尺寸，进行 20等份/15等份/10等份 的平分，比如  414px / 20 = font-size；375px / 20 = font-size；320px / 20 = font-size；
    2. 一般将 逻辑分辨率375</