石家庄网站建设关于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布局的相关介绍，希望大家能够喜欢。