rem布局的全称
<p>REM布局的全称是"Root EM"布局。</p>
<p>REM是CSS中的一个单位，它是相对于根元素（即html元素）的字体大小来计算的。在REM布局中，所有的尺寸都是相对于根元素的字体大小来计算的，这样可以实现响应式布局，使得页面在不同设备上的显示效果更加一致。</p>
<p>使用REM布局时，通常会将根元素的字体大小设置为一个相对较小的值，然后使用REM单位来定义其他元素的尺寸。这样，当页面在不同设备上显示时，只需要调整根元素的字体大小，其他元素的尺寸会自动按比例缩放。</p>
网页设计里的字体怎么改变rem格式
响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。
em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。
rem可以和flex一起用吗
Rem单位和Flex布局可以很好地结合使用。Rem单位是指相对于根元素（通常为html）的字体大小的单位，而Flex布局是一种用于灵活排列元素的布局模式。
在使用Flex布局时，可以使用Rem单位来定义元素的尺寸、间距等属性。由于Rem单位具有相对性，可以根据根元素的字体大小的变化自动调整元素的尺寸。这使得在不同设备上实现自适应布局变得更加方便。
例如，可以使用Rem单位来定义Flex容器的宽度和高度，以及内部元素的间距和边距。通过在CSS中设置这些属性为Rem单位，可以实现元素的自适应布局。并且，由于Rem单位的相对性，即使在字体大小变化的情况下，元素的尺寸和间距也会相应地进行调整，以适应不同的设备和屏幕尺寸。
因此，Rem单位和Flex布局的组合可以提供更好的自适应性和灵活性，使得设计排版更加方便和易于维护。
发表评论