使用rem 布局 高度
rem
单位用于以相对术语定义字体,而不是以像素为单位的绝对大小。 但是您知道这个单元对于版式和版式有用吗?
在我的CSS布局课程的视频教程中,您将了解为什么使用rem
单元进行布局有很大的好处。
基于Rem的布局的好处
在CSS布局课程中,我们所有的布局规范都是使用rem
单元完成的。 正如我们在排版课程中更详细提到的, rem
单位是页面根字体大小的倍数。
rem
单元不仅对版式有用,而且对您的布局也很有用,我将向您展示为什么在设置布局时应该使用rem
单元。
让我们从我们正在研究的示例页面开始:
然后,如果我在浏览器中更改字体大小,则可以看到页面上的字体大小增加了:
现在,如果我继续增加字体大小并刷新,现在您可以看到整个布局已经适应了较大的字体大小。
一切仍然可读,这是可能的,因为通过使用rem
单位设置整个布局,我们可以确保所有内容都是灵活的,具体取决于来自浏览器设置的文档根字体大小。
同样,如果我将字体大小减小到很小的大小并再次刷新,则可以看到整个布局再次缩小。
因此,通过使用这些rem
单位,我们可以确保当用户更改字体大小时,不仅文本本身更改为适合,而且整个布局也更改为适合。
观看完整课程
在整个课程中,“ 从这里开始:学习CSS布局” ,您将通过使用rem
单元创建各种布局来将在本视频中学到的东西付诸实践。 您将学到在Web设计中创建最常见的布局类型所需的所有知识。 我们将介绍创建响应式CSS的大小,对齐方式,间距和最佳实践。
如果您刚刚起步并想精通CSS,请查看“ 学习CSS:完整指南” 。
或者,您可以尝试我们针对Web设计初学者的“从这里开始”系列中的更多课程:
翻译自: https://webdesign.tutsplus.com/tutorials/why-you-should-be-using-rem-based-layouts--cms-27828
使用rem 布局 高度