web前端开发时推荐用rem做单位

最新推荐文章于 2024-07-28 20:57:17 发布

自酌一杯酒

最新推荐文章于 2024-07-28 20:57:17 发布

阅读量1.4k

点赞数

分类专栏：前端 CSS 文章标签：前端开发 web rem单位

本文链接：https://blog.csdn.net/struggleThunder/article/details/106649044

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

欢迎访问我的个人博客

我之前做页面写css样式的时候一直用的 px 做单位，因为直接看着PC端的设计图标注多少像素就写多少像素。直到做了一个内容宽度是1440px 大小的PC端设计图后，我感觉用 rem 做单位才是最好的选择（个人认为），不管开发的是PC端还是移动端，还是响应式页面。

下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem

一、rem 单位

rem 是一个相对单位，相对根元素 <html>标签 字体大小的单位，一般浏览器默认的是 1rem = 16px

html { font-size: 16px; }

二、我是怎样使用 rem 的

我会将 1rem 默认为 50px

html { font-size: 50px; }

为什么默认50px呢？

我认为这样 rem 和 px 之间的换算会好计算一些。比如某张设计图中的一个内容区域宽度标注的是 650px ，换算成rem做单位就是 13px 。

计算方式就是：650 ÷ 100 * 2 怎么样？是不是一下得出结果了

可能有人就想 （我之前是这样想过），直接用px做单位，不香吗？还换算成rem，不是多此一举吗？下面我就谈谈我从 px 到 rem 遇到的神奇的事，改变了我的想法

三、为什么推荐使用 rem 做单位

我推荐用rem做单位，还得从一张总宽是 1920px ，内容宽度是 1440px 的设计图说起，而且还只要求按图给的多少就写多少。

先说一下，我电脑的分辨率是1920 * 1080。在开始写了一部分样式后，我就打开谷歌浏览器看了一下效果，发现内容占整个页面 93.75% ，两遍留的空余部分就显得非常少了，而且还想着一些电脑分辨率不高的，访问这个页面，全屏岂不是还有横向滚动条，体验肯定不好。

但是我看设计图给的两遍空余部分挺宽的呀，为什么我写出来的页面用谷歌浏览器打开就看着不一样了呢？然后我就用IE内容的浏览器打开看了一下，发现和设计图几乎是一样的。感觉很奇怪，然后我就打印了页面总宽度，才发现问题。在谷歌浏览器页面宽度只有1536px，而在IE浏览器就是正常的1920px

谷歌浏览器

IE浏览器

为什么谷歌浏览器会是这样的情况呢？原来是因为我电脑显示的缩放与布局设了1.25倍，然而1920 ÷ 1.25 刚好等于 1536px，而且我想谷歌浏览器默认是跟随系统的设置，这样就能解释为什么谷歌浏览器页面宽度只有 1536px 了

电脑显示：缩放与布局

重点来了！为什么用rem

上面说到为了好计算，我默认会将根元素的字体大小设置为 50px ，也就是说1rem = 50px

就拿内容宽度是1440px的设计图为例，换算成rem做单位就是28.8rem，而且再利用 CSS3 @media 查询 ，浏览器宽度改变的时候调整根元素的字体大小。就像下面的例子

html {
    font-size: 50px;
}

@media (max-width: 1536px) {
    html {
        font-size: 40px;
    }
}

.container {
    /* 浏览器宽度大于1536px的时候，容器宽度为1440px；
	   浏览器小于等于1536px的时候，容器宽度就是1440px的0.8倍了 */
	width: 28.8rem;
	margin: 0 auto;
}

当浏览器宽度小于等于 1536px 的时候（是因为 1920 的 0.8倍刚好等于 1536），根元素的字体大小缩小成原来的 0.8倍为 40px。但是我们将 px 换算成 rem 的时候，还是将以 50px 为准（除以 100 再乘 2 ）。