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

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
HTML中如何使用rem

大家好我是在石家庄做网站开发的一名网站开发工程师

最近在进行网站开发时发现了rem这个方法,下面我带大家了解一下HTML红如何使用rem布局。

我们先来简单了解rem是什么:remfont size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。 

所以我们只要定义好 html的字体大小就可以了。

那么下面我就介绍三种rem的用法

 

第一种是最简单的类型

1.我们可以直接给html标签一个固定的font-size属性     html{fon-size: 10px;}  这种情况1rem就等于是10px,做到响应式的朋友可以尝试使用第二种方法  

2.@media (min-width:640px){html{font-size:24px;}}  //我们可以通过媒体查询标签动态定义htmlfont-size属性 进而实现根据屏幕变化,改变1rem=多少px

第三种会涉及到js

//定义一个函数

3. var fon = function () {

                             // 这个a就是浏览器可是宽度

                            var a=document.body.offsetWidth

                      //我们可以根据浏览器可是宽度来设置htmlfont-size属性

          //屏幕可视宽度大于等于1023

                      if(a>=1023){

                                          document.getElementsByTagName("html")[0].style.fontSize = a/19.20 + 'px'; //rem的值复制给顶级标签htmlfont-size

                                          //我这里是做了两种适配,第一种浏览器可视宽度是1920px 所以让1920/19.2=100 1em=100px

                                                                                                                                                               //1920/192=10  1rem=10px

                                         console.log(document.body.offsetWidth /19.20)

                     }else{                                                                                                                //我这里因为除不进所以调用一下下面的方法

                                         document.getElementsByTagName("html")[0].style.fontSize = Math.round(a/4.14) + 'px'; //rem的值复制给顶级标签htmlfont-size

                                         //我这里是做了两种适配,第二种浏览器可是宽度是414px 所以让414/4.14

                                         console.log(document.body.offsetWidth /4.14)

                 }

}

fon()  

//浏览器可视宽度变化就执行这个调用一下函数,更改htmlfont-size属性

window.onresize = function () {

        fon()

}

//像这种除不尽的情况大家可以使用下面的方法,先取整然后再更改htmlfont-size属性

414/4.14=100.00000000000001

//round: 四舍五入

//Math.round(414/4.14) = 100

 

以上就是石家庄尚武科技做网站开发的工程师为大家带来的关于rem的相关介绍,希望对大家有所帮助。

如果大家对rem还有什么想要了解,大家可以关注石家庄尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。

 




上一篇:决定网站优化效果的因素有哪些?             下一篇:如何在iis网站搭建中显示详细错误信息

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