前端响应式布局基础——rem

综合技术 2018-05-18 阅读原文

rem是根元素字体的单位,比如 html{font-size:16px;} ,1rem相当于16px。

不仅仅可以给字体用,其他px单位的都可以用,比如设 padding:2rem ,相当于32px。

响应式布局的准则

响应式布局的要求(摘自知乎 Z Yuhan ):

1 . 内容区块 可伸缩:内容区块的在一定程度上能够自动调整,以确保填满整个页面


2 . 内容区块 可自由排布:当页面尺寸变动较大时,能够减少/增加排布的列数


3 . 边距 适应:到页面尺寸发生更大变化时,区块的边距也应该变化


4 . 图片 适应:对于常见的宽度调整,图片在隐去两侧部分时,依旧保持美观可用


5 . 内容 能够自动隐藏/部分显示:如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏


6 . 导航和菜单 能自动折叠:展开还是收起,应该根据页面尺寸来判断


7 . 字体 比例缩放时,字体也保持缩放

rem有什么用

放弃px单位,使用rem作为单位,这样在不同尺寸的设备上,通过修改根节点的 font-size 大小,实现等比例缩放

假设设备宽度为600px,页面只有2个在一行的div,使用rem宽度如下设置

html{
    font-szie:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

现在换到宽度为400px的设备上,保持比例相同,只有改变font-size即可

//在js计算字体大小,x为缩小比例
400/600=x/10
x=6.6
html{
    font-szie:6.6px;/*实际上使用js动态改变,也可以配置媒体查询*/
}
/*以下保持不变*/
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

为什么不用百分比呢?岂不是很简单

百分比是相对于父元素计算的,使用不方便,而且rem多了个字体变化。

如何使用

1 . 给根元素设置字体大小,并在body元素校正

html{font-size:100px;}
body{font-size:14px;}

如上设置后,使用rem代替px,直接除100即可

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*相当于10px 30px*/
}

2 . 绑定监听事件,dom加载后和尺寸变化时改变font-size

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小,1536是开发时浏览器窗口的宽度,等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

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

自动转换成rem

参见 postcss,待后续。。。

稀土掘金

责编内容by:稀土掘金阅读原文】。感谢您的支持!

您可能感兴趣的

Android webview 加载html片段笔记 场景:一些内容是直接PC端编辑器保存的,包含了大量的html标签甚至是ubb语言的标签。 直接使用大量的冗余信息(类似但不限于CSS布局等)。 ...
Analysing code – I can’t find source h... I know that my question may be annoying because I'm asking about something whic...
Block-Print Maps Part III: Custom Fonts You are a clever cartographer. You don’t waste time trying to reinvent the wheel...
Is it possible to place a conditional declaration ... Basically I have a custom built "Date" class "EndDate" in my MVC output model. ...
Fixing the jitter bug Situation: I wanted to have a card element shift up slightly when hovered ove...