摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。
背景
现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。
开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布局的要求更高，不能像PC页面一样设计几个断点利用媒体查询，两边留空白就解决。移动端页面需要把屏幕空间都利用上，而移动设备的尺寸和分辨率多种多样，解决移动端页面的自适应布局问题是搭建新的移动端项目的重点和难点。
经过研究，我在公司的多个移动端项目使用了REM布局来解决移动端自适应布局的问题。
REM介绍rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，rem布局是一个流行的解决移动端响应式布局的方案。在页面初始化时，使用JS根据屏幕的尺寸和dpr等信息设置rem的大小，而在css中写下元素的高度等信息时，使用rem。如将rem设置为100px，则元素的高度为36px时，需要将元素的高度写成0.36rem。字体大小可能需要写成0.12rem等，可读性较差，输入起来也不方便，降低了工作效率。
解决方案在webpack中使用px2rem-loader。用法如下
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader", "px2rem-loader?remUnit=75&remPrecision=8"]
}
]
这样便可以应对常见的750px的设计图，直接按照设计图的尺寸来填写属性大小就好，
注意，还需要在html文件中引入flexible文件
踩到的坑
微信浏览器如果退回的话，页面被缓存，但是js文件没有重新调用，会导致布局混乱。需要调用pageshow事件来解决
e.addeventListener("pageshow", function(e) {
// d的作用是重新设置documentElement的fontsize为clientWidth的1/10
e.persisted&&d()
})
深入了解
你也许会对flexible.js做了什么比较感兴趣。在这之前，需要简单了解一下viewport的知识
viewport meta标签有六个属性
width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale：设置页面的初始缩放值，为数字，可带小数
minimum-scale： 允许用户的最小缩放值，为数字，可带小数
maximum-scale：允许用户的最大缩放值，为数字，可带小数
height 设置layout viewport 的高度
user-scalable 是否允许用户进行缩放，值为”no”或”yes”
layout viewport 布局视窗
网站的宽度，可以通过document.documentElement.clientWidth获取，通过viewport meta标签设置
visual viewport——视觉视窗
代表浏览器可视区域的大小，可以通过 document.documentElement.innerWidth来获取
ideal viewport——理想视窗
跟移动设备相关的viewport，移动设备的宽度。iPhone的值是320
visual viewport width = ideal viewport width / zoom factor
zoom factor可以设置initial-scale来控制
当visual viewport = layout viewport时，页面无水平滚动条，刚好显示全部内容
如果不设置initial-scale，通过设置viewport meta的width为device-width，可以令layout viewport等于ideal viewport，从而达到页面无水平滚动条的效果
获取dpr和设置dpr的倒数scale
动态生成viewport meta，initial-scale值为scale
设置rem为clientWidth(layoutview port width) 的1 / 10
这时我们我们开发项目只要注意屏幕的宽度是10rem就可以了
最后其实REM方案主要还是以clientWidth的1/10为基本单位设置元素的尺寸来达到自适应的目的。可以使用VW来代替，也有px2vw之类的插件。
要达到自适应布局，还可以使用百分比、flex布局或是grid布局，这里就不细说了。
本文章为前端进阶系列的一部分,
欢迎关注和star本博客或是关注我的github
px2rem
移动前端开发之viewport的深入理解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107668.html
摘要：本文同步发布于我的个人博客上移动端自适应布局不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。表示当前视口宽度的百分之一。同时在移动端，的兼容性还不错，完全可以直接使用。这样完成了一个简单好用的移动端布局了 本文同步发布于我的个人博客上 - vw+rem移动端自适应布局 不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。一般来...
摘要：已更新强力推荐移动端自适应解决方案与仿原生超高清超细腻解决方案新增了功能，开启了功能后，可以自动设置设备尺寸为物理分辨率使网页达到原生精细效果。 已更新 - 强力推荐 (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)https://gitlab.com/fekits/mc-... v1.1.0 [Latest version] 1、新增了dpr功能，开启了DPR功能后，可以...
摘要：已更新强力推荐移动端自适应解决方案与仿原生超高清超细腻解决方案新增了功能，开启了功能后，可以自动设置设备尺寸为物理分辨率使网页达到原生精细效果。 已更新 - 强力推荐 (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)https://gitlab.com/fekits/mc-... v1.1.0 [Latest version] 1、新增了dpr功能，开启了DPR功能后，可以...
阅读 2454·2021-10-22 09:55
阅读 1744·2021-09-27 13:35
阅读 1140·2021-08-24 10:02
阅读 1235·2019-08-30 15:55
阅读 1100·2019-08-30 14:13
阅读 3352·2019-08-30 13:57
阅读 1874·2019-08-30 11:07
阅读 2324·2019-08-29 17:12
