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

rem介绍

rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。 假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

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);

还有一种方法会根据 devicePixelRatio 设定 initial-scale 来放大 viewport,使页面按照物理像素渲染,提升清晰度。 代码见这里

2 做页面时 将设计稿的宽度缩放至 640px。在上一步中,1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第119天:移动端:CSS像素、屏幕像素和视口的关系

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixe...

17050
来自专栏cnblogs

深入理解及应用Position

position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相...

21460
来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

10610
来自专栏达摩兵的技术空间

固定宽高比例盒模型实现方案

常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

8720
来自专栏水击三千

android 补间动画

android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能。如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动...

269100
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

63300
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

359100
来自专栏mySoul

事件冒泡和传播

这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了...

14260
来自专栏分享达人秀

两分钟掌握FrameLayout帧布局

前面学习了线性布局、相对布局、表格布局,那么本期来学习第四种布局——FrameLayout帧布局。 一、认识FrameLayout 帧布局是An...

25490
来自专栏前端知识分享

第126天:移动端-原生实现响应式模态框

下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。

14430

扫码关注云+社区

领取腾讯云代金券