尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告

尚武科技国庆节放假公告    2018-09-30

服务器维护通知……    2018-09-21

服务器故障通知    2018-09-12

尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
石家庄网站建设关于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布局的相关介绍,希望大家能够喜欢。




上一篇:石家庄网站建设关于原型模式的认知             下一篇:石家庄做网站之网页中用到的对比原则:色彩对比(一)

标签:
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   尚武科技售前专员  尚武科技技术专员  尚武科技美工专员  尚武科技售后专员  
Copyright © 2008-2018 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved