资讯专栏INFORMATION COLUMN

移动端自适应布局方案

zacklee / 1326人阅读

摘要:背景现在工作中有超过一半的时间用于移动端项目的开发,包括嵌入页,微信页面和移动页。经过研究,我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位,布局是一个流行的解决移动端响应式布局的方案。

背景

现在工作中有超过一半的时间用于移动端项目的开发,包括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标签

viewport meta标签有六个属性

width:设置layout viewport 的宽度,为一个正整数,或字符串”width-device”

initial-scale:设置页面的初始缩放值,为数字,可带小数

minimum-scale: 允许用户的最小缩放值,为数字,可带小数

maximum-scale:允许用户的最大缩放值,为数字,可带小数

height 设置layout viewport 的高度

user-scalable 是否允许用户进行缩放,值为”no”或”yes”

三种viewport

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,从而达到页面无水平滚动条的效果

lib-flexible原理

获取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移动端自适应布局

    摘要:本文同步发布于我的个人博客上移动端自适应布局不管是面试还是工作过程中,移动端的布局都比较常见,而移动端适配方法也是多种多样。表示当前视口宽度的百分之一。同时在移动端,的兼容性还不错,完全可以直接使用。这样完成了一个简单好用的移动端布局了 本文同步发布于我的个人博客上 - vw+rem移动端自适应布局 不管是面试还是工作过程中,移动端的布局都比较常见,而移动端适配方法也是多种多样。一般来...

    Little_XM 评论0 收藏0
  • RATIO.JS 移动端自适应方案

    摘要:已更新强力推荐移动端自适应解决方案与仿原生超高清超细腻解决方案新增了功能,开启了功能后,可以自动设置设备尺寸为物理分辨率使网页达到原生精细效果。 已更新 - 强力推荐 (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)https://gitlab.com/fekits/mc-... v1.1.0 [Latest version] 1、新增了dpr功能,开启了DPR功能后,可以...

    刘永祥 评论0 收藏0
  • 移动端自适应方案

    摘要:如何解决移动端的自适应问题主要是移动端的屏幕尺寸比较多,如何在各种屏幕宽度下显示的更好,更一致问题。用解决自适应的问题,是个非常精确的解决方案,能够将高度和宽度都做到随着屏幕的宽度完全的等比缩放,但是缺点就是开发起来效率低点。 1.背景知识 首先是看几篇文章,了解viewport scale dpr 图片的显示精度问题 一像素显示问题, 缩放导致的像素适应问题 移动端的自适应问题...

    Yi_Zhi_Yu 评论0 收藏0

发表评论

0条评论

zacklee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<