[移动端]移动端适配方案略解
脚本宝典收集整理的这篇文章主要介绍了[移动端]移动端适配方案略解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
文章目录
- css3新增单位
- rem
- vw vh
- 移动端适配方案
- flexible rem方案
- 优点
- 缺点
- vh、vw方案
- 缺点
css3新增单位
rem
css3 新增相对单位
rem和em单位一样，都是一个相对单位，em是相对于父元素的font-size进行计算，即父元素的font-size为npx，则1em就代表npx，所以em单位在不同的元素或选择器中都不同
因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了 rem是相对于根元素html的font-size来进行计算的，即根元素html的font-size为npx，则1em就是npx
vw vh
- vw：1vw等于视口宽度的1%
- vh：1vh等于视口高度的1%
- vmin：选取vw和vh中最小的那个
- vmax：选取vw和vh中最大的那个
![[移动端]移动端适配方案略解](http://www.js-code.com/res/2022/06-28/11/c1e174596575835d247103319ee9eaed.jpg "[移动端]移动端适配方案略解")
如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 pxtoviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。
移动端适配方案
flexible rem方案
在进行移动端开发时，我们会发现一个问题，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 90px;
height: 50px;
margin-right: 10px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
我们会发现这段代码在不同设备上的布局会变得截然不同 在设备iPhone6/7/8上
![[移动端]移动端适配方案略解](http://www.js-code.com/res/2022/06-28/11/37d3061e77ead3fc90d7ce8f9ec4a93d.jpg "[移动端]移动端适配方案略解")
![[移动端]移动端适配方案略解](http://www.js-code.com/res/2022/06-28/11/51e666adf0e7f907c1b31601e02c8224.jpg "[移动端]移动端适配方案略解")
关键就在于我们书写css样式的时候，我们使用的单位是px
px是相对逻辑单位，我们写多少px就是定死的值，是无法随设备的宽度改变而改变的，而我们现在要实现同一元素在不同设备上布局的占比要一致，那么我们使用的单位就需要一致
因此我们想到使用rem，rem是相对于html的font-size来计算的，我们使用js在页面布局之前，对当前设备的宽度进行获取，然后除以10，相当于将页面十等分，然后将十分之一设置成rem，这样在不同的设备上rem代表的都是页面宽度的十分之一，自然就能实现不同设备上的适配了
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
上面的代码中，将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。
使用rem布局虽然可以解决适配问题，但是因为我们需要手工完成px单位到rem单位的转换，所以就会变得复杂很多
优点
相对于px固定布局和百分比布局，可以很好地解决不同设备下的尺寸，间隙，字体的相对大小问题
缺点
1.计算繁琐 2.需要js辅助
vh、vw方案
vh、vw方案即将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight等分为 100 份。
- vw(Viewport’s width)：1vw等于视觉视口的1%
- vh(Viewport’s height) :1vh 为视觉视口高度的1%
- vmin : vw 和 vh 中的较小值(用于设备旋转时)
- vmax : 选取 vw 和 vh 中的较大值(用于设备旋转时)
如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。![[移动端]移动端适配方案略解](http://www.js-code.com/res/2022/06-28/11/5d241822ad4b800c7fd9f3877d94accf.jpg "[移动端]移动端适配方案略解")
缺点
- px转换成vw不一定能完全整除，因此有一定的像素差。
- 比如当容器使用vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等…
脚本宝典总结
以上是脚本宝典为你收集整理的[移动端]移动端适配方案略解全部内容，希望文章能够帮你解决[移动端]移动端适配方案略解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15