web前端开发时推荐用rem做单位
web前端开发时推荐用rem做单位
我之前做页面写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
为什么谷歌浏览器会是这样的情况呢？ 原来是因为我电脑显示的 缩放与布局 设了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 ）。
如果用的rem做单位，只要控制好媒体查询，就会整体的同比例缩小或放大。而且也完美的解决了我上面的问题（谷歌浏览器页面内容被放大1.25倍的问题）。并且写移动端页面的时候用 rem 做单位，也可以很好的控制不同宽度的屏幕下，显示的页面内容。
腾讯云开发者
