HTML中如何使用rem

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

最近在进行网站开发时发现了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还有什么想要了解，大家可以关注成都创新互联官方公众号“创新互联π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。

网页名称：HTML中如何使用rem
文章来源：/news45/310695.html

成都网站建设公司_创新互联，为您提供电子商务、用户体验、ChatGPT、网站收录、外贸建站、面包屑导航

广告

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