移动端适配-rem

最新推荐文章于 2024-05-17 17:40:41 发布

梦尘星月

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量99

点赞数

分类专栏： javascript 文章标签： web javascript

本文链接：https://blog.csdn.net/qq_40536213/article/details/108994445

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.rem与em的区别

说到rem，通常会与em，px这类进行比较。rem主要是根据网页的根元素来设置字体大小，和 em的区别是，em 是根据其父元素的字体大小来设置。对于现在大部分的浏览器来说，例如IE9+，Firefox、Chrome、Opera等，在我们不修改相关的字体配置，都是默认显示 font-size 是 16px 即

html {
    font-size:16px;
}

那么在我们想要通过rem设置内部一些标签的值时，就要通过你想要设置的像素值来除以根元素的像素值。比如我们想设置一个p标签的字体大小为12px，则

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

2.rem进行移动端的适配

使用rem单位事先需要做的一件事情就是设置根元素<html>的font-size，通常有两种做法。

通过js计算
通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度，因为其元素的基准尺寸是直接算出来的。既然是JS代码，为了避免造成因为动态设置元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。

利用 css 的 media query 来设置

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

但当用作图片或者一些不能缩放的展示时，必须要使用固定的 px 值，因为缩放可能会导致图片压缩变形等。

梦尘星月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端适配-rem

1.rem与em的区别说到rem，通常会与em，px这类进行比较。rem主要是根据网页的根元素来设置字体大小，和 em的区别是，em 是根据其父元素的字体大小来设置。对于现在大部分的浏览器来说，例如IE9+，Firefox、Chrome、Opera等，在我们不修改相关的字体配置，都是默认显示 font-size 是 16px 即html { font-size:16px;}那么在我们想要通过rem设置内部一些标签的值时，就要通过你想要设置的像素值来除以根元素的像素值。比如我们想设置一个p标
复制链接

扫一扫