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

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

我们先来简单了解rem是什么：rem（font 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;}}  //我们可以通过媒体查询标签动态定义html的font-size属性 进而实现根据屏幕变化，改变1rem=多少px

第三种会涉及到js

//定义一个函数

3. var fon = function () {

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

                            var a=document.body.offsetWidth

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

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

                      if(a>=1023){

                                          document.getElementsByTagName("html")[0].style.fontSize = a/19.20 + 'px'; //把rem的值复制给顶级标签html的font-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的值复制给顶级标签html的font-size

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

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

                 }

}

fon()  

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

window.onresize = function () {

        fon()

}

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

414/4.14=100.00000000000001

//round: 四舍五入

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

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

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