优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端基础:如何更好的使用em、rem（前端em标签）

nanyue 2024-10-22 13:05:10 技术文章 15 ℃

em和rem都是前端开发中表示长度的单位，特别是在移动端的开发中应用最广，可能很多前端新手对这两个单位平时虽然在用，但可能不太理解，这篇文章也许正好可以帮助你更好的理解。

em，rem怎么用

rem是实现自适应布局的常用方法。

rem以根元素字体大小为基准，em以父元素字体大小为基准

对rem而言，<html>的字体大小为14px，1rem就等于14px，2rem就等于28px。

对em而言，父元素的字体大小为14px，子元素的1em就等于14px，2em就等于28px。

设置根元素<html> font-size属性值的方式：

第一种方法，js动态读取屏幕宽度：

通过js读取屏幕宽度，根据宽度计算对应的尺寸并设置根元素font-size值。 一般项目以320px的屏幕为基准，设置font-size为12px。

防止设置<html>的font-size造成页面抖动，这部分代码放在header底部加载，并内联到html文档中。

第二种方法，媒体查询：

通过CSS3媒体查询，不同的屏幕设置不同的<html>字体大小。

html {
 font-size: 62.5%
}
@media only screen and (min-width: 481px) {
 html {
 font-size:94%!important
 }
}
@media only screen and (min-width: 561px) {
 html {
 font-size:109%!important
 }
}
@media only screen and (min-width: 641px) {
 html {
 font-size:125%!important
 }
 
 body {
 max-width: 640px
 }
}

项目中px转rem的计算可以借助工具完成：

  • sass-rem
  • webpack项目可以使用 px-to-rem-loader

这两个工具的使用大伙可以自行查阅网上文档，网上都有详细的教程，当然工具也不仅限于这两种。

小结

这篇文章比较简短，不过内容还是比较容易理解的。希望大伙能多动手去实践实践。

Tags：

猜你喜欢

最近发表
标签列表