成都网站建设关于CSS中rem布局的讲解

平时响应式网站的开发，我都会先对比PC和MObiLE的设计稿，看看有什么区别，然后才进行编写css。通常都是使用flex。宽度尽量用百分比，间距、高度、字体大小使用em，就可以很方便的进行大小的控制。今天成都网站建设公司成都创新互联为大家详细的讲解一下什么是rem布局。

REM

REM这个单位，会根据html的font-size大小进行转换。

html{font-size:100px;}

p{padding-top:.5rem;}

.5rem=50px/100

转换后p的padding-top就是50px了。只要我们进行适当的计算，当前屏幕的宽度，html的font-size是多少px就OK了。

如何计算当前html的font-size值

比如，我们拿到的设计稿是750px，那就设置成当屏幕宽度是750的时候，html的font-size就是100px（当然这个100px你可以随意设置的，我设置成100px只是方便我计算），然后就根据当前屏幕的宽度/750*100，就得到了当前屏幕宽度的font-size值。

/当前屏幕宽度/750=当前屏幕宽度的font-size/100

//代码如下

(function(doc,win){

vardocEl=doc.documentElement,

resizeEvt='orientationchange'inwindow?'orientationchange':'resize',

recalc=function(){

varclientWidth=docEl.clientWidth;

if(!clientWidth)return;

docEl.style.fontSize=100*(clientWidth/750)+'px';

};

if(!doc.addEventListener)return;

win.addEventListener(resizeEvt,recalc,false);

doc.addEventListener('DOMContentLoaded',recalc,false);

})(document,window);

上面这段代码，是直接根据屏幕宽度进行计算font-size的。

以上就是从事成都网站建设的创新互联公司为大家带来的关于rem布局的相关介绍，希望大家能够喜欢。

文章题目：成都网站建设关于CSS中rem布局的讲解
文章起源：/news38/320188.html

成都网站建设公司_创新互联，为您提供定制开发、搜索引擎优化、移动网站建设、外贸网站建设、网站改版、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联