移动端页面使用rem来做适配

原创 2018年04月17日 15:24:45

rem来做适配

以前我们往往这样做页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。

如果用rem来页面,我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽,字体越大。然后对原本使用px的地方使用rem来替换。这样,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。

具体做法

1 根据不同的设备宽度在根元素上设置不同的字体大小。
为了能将设计稿中的 px 方便的转换为页面中 rem,我设置 1rem 为 宽度为 640px 的设计稿中的 100px。代码如下

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大宽度
            width = 540;
        }
        var rem = width / 6.4; 
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window)
做页面时
设计图除以100就可以直接写rem了。。

备注:写的时候最好利用script标签把js写到head中

版权声明:我写的你不能转载,但是你可以复制啊。复制记得加关注啊(迷之微笑)。 https://blog.csdn.net/quhongqiang/article/details/79975434

移动端Web页面适配方案

name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal...
  • ws379374000
  • ws379374000
  • 2017-12-01 14:12:27
  • 1899

移动端h5页面不同尺寸屏幕适配兼容方法

最近刚开始做移动端页面,遇到了不少bug,说一下解决移动端不同屏幕页面的适应问题。 1. viewport属性及html页面结构 // width 设置viewport宽度,为...
  • qq_31915745
  • qq_31915745
  • 2017-06-03 10:49:59
  • 13067

移动端页面适配方案

阅读目录 1. 问题的引出2. 简单问题简单解决3. 网易的做法4. 淘宝的做法5. 比较网易与淘宝的做法6. 如何与设计协作7. 总结 文/流云诸葛 本文结合自己对网易与淘宝移动端...
  • zqf065
  • zqf065
  • 2017-05-15 09:43:39
  • 6568

移动端适配方案(下)

之前做过PC页面的人聊的最多的就是『兼容』,这是因为浏览器之间的差异引起的,不再多说。而移动端是基本没有『兼容』的问题的,全是CSS3,简直不要太开心。可是『适配』问题随之而来。 什么是『适配』...
  • ecjtuhq
  • ecjtuhq
  • 2016-10-23 14:00:16
  • 2082

移动端页面适配———多方案解析

在移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型。对于移动端适配,不同的公司、不同的团队有不同的解决方案。我在项目中也用了一...
  • sreddouilyongxia
  • sreddouilyongxia
  • 2017-09-26 09:13:06
  • 566

关于移动端适配的几个方法,快速构建响应式网站必备知识

随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面。 但是我们同样要维持pc端,因此难免会遇到许多麻烦。 而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要...
  • wushaoxion
  • wushaoxion
  • 2016-09-26 22:42:00
  • 4539

移动端适配总结

1、rem rem是css3出现后新增的单位,这个单位的大小会根据html元素的fontsize的值自动进行缩放,在w3c上是这样子描述的:“font size of the root elemen...
  • u014477038
  • u014477038
  • 2016-10-27 17:05:16
  • 1286

2018移动端页面适配最新方案直接写px-通过gulp搭建一体化的移动端开发环境

1.开始 在flexible的GitHub上面写着 由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有...
  • zhalcie2011
  • zhalcie2011
  • 2018-02-07 18:38:21
  • 265

移动端 h5开发相关内容总结——CSS篇

1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的其它相关配置内容如下: width viewport 宽度(数值/device-width) height viewport 高度(数值/de...
  • yisuowushinian
  • yisuowushinian
  • 2016-01-06 15:59:15
  • 25673
收藏助手
不良信息举报
您举报文章:移动端页面使用rem来做适配
举报原因:
原因补充:

(最多只允许输入30个字)