资讯专栏INFORMATION COLUMN

谈谈rem移动端布局

legendmohe / 1092人阅读

摘要:有些人可能会注意到第二行代码跟淘宝的那个有所区别,区别就在于的换算比例,这里你可以任意改动为实际中的情况,比如有人喜欢用,那你可以将上面的改为,换算比例则改为。

使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗?rem的根html font-size设置为多少合适?看看这篇文章,也许能帮到你。

如果对你有用,还请点个赞,谢谢!

em自适应原理
rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局。更多介绍请看这篇文章:rem是如何实现自适应布局的。

rem的值
目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle="html{font-size:"+rem+"px !important}";
        rootItem = document.getElementById("rootsize") || document.createElement("style");
        if(!document.getElementById("rootsize")){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id="rootsize";
        }
        if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
        }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

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

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }})(640, 640);



你可以把上面的代码内嵌到html的head中,换算比例是1rem=100px,为了计算方便,你可以在我的一个github项目下载完整的结构和一个压缩的js。

项目主页

上面代码中的关键代码是:

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";

第一行代码,获取移动设备的宽度,第二行,rem的值等于(设备的宽度)x100/(设计稿宽度),第三行,设置html的字号为第二行的值。
有些人可能会注意到第二行代码跟淘宝的那个有所区别,区别就在于rem的换算比例,这里你可以任意改动为实际中的情况,比如有人喜欢用20px,那你可以将上面的100改为20,换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章:Rem精简版实现自适应。
还有的人要用回淘宝的那个,那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了,假设我们的设计稿宽是640的,则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章:rem自适应布局-flexible。
使用媒体查询
说到底,上面的js代码不就是根据不同的设备调整对应的html字号嘛,那么我们根据实际的设备,来加上相应的字号不就行了吗?

我们知道html的默认字号是16px,则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

html {
font-size: 62.5%
}

@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}

@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}

@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}

body {
max-width: 640px
}
}

上面的代码则是通过1rem=20px来换算的,从哪里看出来呢?从最大的一个值640出发,假如你的设计稿是750的话,那你还要设计更多的媒体 查询,换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢?按照上面的规则,最大的值为:html:font- size:100/16100%,其它的则按比例,比如480px,则为480/640(100/16*100%)。

其他适配方式 :https://blog.csdn.net/irokay/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/14320.html

相关文章

  • 我们来谈谈项目中遇到的需要兼容pc移动的css布局

    摘要:首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的 首先在head里面需要引入移动端属性: 1.css布局方式之div + css布局; 标题: div + css布局 内容: 兼容...

    sshe 评论0 收藏0
  • 我们来谈谈项目中遇到的需要兼容pc移动的css布局

    摘要:首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的 首先在head里面需要引入移动端属性: 1.css布局方式之div + css布局; 标题: div + css布局 内容: 兼容...

    miracledan 评论0 收藏0
  • 谈谈移动屏幕适配的几种方法

    摘要:如上图,红框部分为原始宽高比,根据不同屏幕尺寸进行缩放,并加背景填充。样式缩放最省事的适配方法,直接用为单位按视觉进行开发,然后通过计算屏幕与网页的宽高比,用来对网页进行全局缩放。 文/腾讯 莫振中 移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力。在使用了腾讯优测进行软件测试后,问题得到了有...

    tommego 评论0 收藏0
  • 实习一周,做了公司官网,谈谈关于大学生找实习工作以及记录前响应式布局开发心得

    摘要:关于文字个人感觉使用单位结合媒体查询最好做移动端页面。这些话是勉励自己,也送给还未走出象牙塔的学弟学妹,和刚进入社会工作还在迷茫的同胞们。关于弹性布局:   display:flex;很好用,将元素放在一排,盒子可用宽度百分比,可替代浮动,虽然浮动也能做到,但是还要清除浮动,多此一举,还可以实现居中等布局效果,但有兼容性问题,特别是justify-content:space-between,...

    BicycleWarrior 评论0 收藏0
  • 关于rem布局的解析

    摘要:前一段时间群里有人问我相关的问题一直想整理一下可是都忘记了今天终于抽出时间来整理一下相关知识点说到就要谈到移动端布局现在很多人在移动端布局上面还是用我们先来谈谈像素相对单位长度相对于屏幕分辨率而言的我们为什么使用的诞生也是的推动完美解决了的 前一段时间群里有人问我rem相关的问题,一直想整理一下,可是都忘记了.今天终于抽出时间来整理一下相关知识点!说到rem就要谈到移动端布局,现在很多...

    testbird 评论0 收藏0

发表评论

0条评论

legendmohe

|高级讲师

TA的文章

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