Rem和max-width工作方式

max-width

首先我们先看普通的width是什么样的效果！

首先给个测试的div

<div class="test">TEST</div>           

• 然后CSS给定一个宽度

.test {
    width: 1000px;
    background-color: red;
    padding: 100px;
}           

如上图，不管你的浏览器窗口如何改变，你元素的宽度都不会改变；当你缩小窗口视图的实话，流量器会仍然会创造出滑动的空间！

• 但是我们如果使用max-width

.test {
    /* width: 1000px; */
    max-width: 1000px;
    background-color: red;
    padding: 100px;
}           

总结一句话，使用max-width时，当视图窗口大于元素宽度时，那元素宽度就是实际的宽度，但是如果视图窗口宽度小于元素宽度时， 则元素宽度会充满视口窗口宽度！

rem

• 概念：rem是根元素字体的单位，比如 html {font-size:16px;} ，1rem相当于16px。默认情况下，1rem就是等于16px。‘

例如

.test {
    /* width: 1000px; */
    /* max-width: 1000px; */
    background-color: red;
    max-width: 50rem;   #所以这个宽度是50*16
    padding: 4rem;  #这个是4*16
    font-size: 2rem; #这个是2*16
    color: #fff;
}           

html {
    font-size: 10px;
}           

如果想这样设计，那么默认大小就是10了。不是16了

但是这个也会带来一个问题，就是这样不容易实现响应式设计，因为我们无法方便的去实现等比例缩放，所以在响应式设计中，我们通过是通过百分比的方式去写

html {
    font-size: 62.5%;
}           

那么62.5%的这个值是从哪里来的呢？10/16=0.625 =62.5%，所以仍然代表此页面情况下，默认值是10

至于这么设置的优点如下：

1. 重置rem单位基准值。浏览器默认的font-size为16px,这会使rem的值不直观。设置为62.5%后,1rem = 10px,这样rem的计算就简单多了。
2. 方便等比例缩放。通过设置html的font-size,然后使用rem作为长度单位,就可以非常容易地实现整个页面的等比例缩放。只需要改变这个值,所有使用rem的元素就会按比例放大或缩小。
3. 兼容性更好。虽然rem在现代浏览器中得到广泛支持,但老旧浏览器支持不够好。将html的字体大小设置为62.5%,这些浏览器会把rem作为px来处理,内容也不会出现错乱的现象,只是失去等比缩放的能力。
4. 移动端适配方便。在移动端设计中,经常需要根据屏幕宽度进行缩放,设置html字体大小是一个非常简便的操作