【移动端】使用REM进行的响应式布局

最新推荐文章于 2024-03-02 22:03:06 发布

huanmeng122

最新推荐文章于 2024-03-02 22:03:06 发布

阅读量2.6k

点赞数

分类专栏：响应式研究文章标签：响应式布局 rem 移动

响应式研究专栏收录该内容

3 篇文章 0 订阅

订阅专栏

工具ViewtoREM：PX转换到REM（自动预处理）

REM的定义：
rem是相对于根元素<html>来设置字体大小的，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。

REM与EM、PX的区别：
PX：像素，比较精确的单位，但不好做响应式布局
EM：以父节点font-size大小为参考点，标准不统一，容易造成混乱

REM支持的浏览器：
支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法支持。

REM使用方法示例：
1.html中默认的 font-size:16px; 也就是 1rem = 16px
2.以设计宽度为750px为例，那么定义 font-size:50px; 那么 1rem = 50px，比例为：750/50=15
3.定义页面中的尺寸，就是: 宽度/50 rem（比例为15）。例如：设计稿中dom（20px）的尺寸为：20px/50=0.4rem
4.针对不同屏幕尺寸，按同比例设置font-size（比例仍为15）。相当于1rem 变成对应大小（font-size变小多少，1rem就同比例变小多少）。
5.例如：
屏幕宽度为750px，则html设置的font-size为：750/15 = 50，设计稿中dom（20px）的尺寸为：20px/50=0.4rem，1rem = 50px
屏幕宽度为320px，则html设置的font-size为：320/15 = 21.33….，设计稿中dom（20px）的尺寸依然为：20px/50=0.4rem，1rem = 320/750*50px

如下比例关系：

这里写图片描述

JS动态设置width：

<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

CSS固定样式：以下场景包含了移动端设备绝大多数屏幕尺寸。

html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
    html{font-size:21.333333333333332px;}
    body{font-size:12px;}
}
@media screen and (min-width:360px){
    html{font-size:24px;}
    body{font-size:12px;}
}
@media screen and (min-width:375px){
    html{font-size:25px;}
    body{font-size:12px;}
}
@media screen and (min-width:384px){
    html{font-size:25.6px;}
    body{font-size:14px;}
}
@media screen and (min-width:400px){
    html{font-size:26.666666666666668px;}
    body{font-size:14px;}
}
@media screen and (min-width:414px){
    html{font-size:27.6px;}
    body{font-size:14px;}
}
@media screen and (min-width:424px){
    html{font-size:28.266666666666667px;}
    body{font-size:14px;}
}
@media screen and (min-width:480px){
    html{font-size:32px;}
    body{font-size:15.36px;}
}
@media screen and (min-width:540px){
    html{font-size:36px;}
    body{font-size:17.28px;}
}
@media screen and (min-width:720px){
    html{font-size:48px;}
    body{font-size:23.04px;}
}
@media screen and (min-width:750px){
    html{font-size:50px;}
    body{font-size:24px;}
}

详细：字体rem的使用：
http://www.w3cplus.com/css3/define-font-size-with-css3-rem
http://ued.taobao.org/blog/2013/05/rem-font-size/

详细：结合Media Query和REM实现响应式布局：
http://isux.tencent.com/web-app-rem.html

范例：
http://m.dx.com/

huanmeng122

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【移动端】使用REM进行的响应式布局

工具ViewtoREM：PX转换到REM（自动预处理）REM的定义： rem是相对于根元素<html>来设置字体大小的，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。REM与EM、PX的区别： PX：像素，比较精确的单位，但不好做响应式布局 EM：以父节点font-size大小为参考点，标准不统一，容易造成混乱REM支持的浏览器：支持
复制链接

扫一扫