rem (root em)
属于相对单位, 其不是像 em
单位那样是相对于当前元素的字体大小 font-size
计算得出的值,rem
始终相对于页面根元素,即 html
的 font-size
大小计算得出。
所以我们可以使用 rem
作为页面布局主单位,再利用 媒体查询(@media screen)
或 javascript
动态计算并设置在不同屏幕大小下根元素 html
的 font-size
属性值,使得页面元素可以响应式的显示合适的大小。
动态设置 html
元素 font-size
的几种方式
配置固定媒体查询法
1 |
|
js动态计算
1 | //利用js动态控制不同屏幕大小下html的font-size大小 |
基于rem
和vw
的计算方式
1 | html { |
实际应用
配合 sass
在实际项目中使用
通常我们想要使用 rem
布局,那么就需要解决 px
转 rem
的问题。以便在使用时,直观,易于理解。
借助 sass
中的 @function
将 px
转换成 rem
:
1 |
|
上面代码表示,在当前页面的 html
元素的 font-size
值为:16px
时,将 $px
转换为 rem
单位值。
1 |
|
上面代码将被编译为:
1 | .box{ |
在实际项目开发时,我们可以将 此功能函数封装在一个单独的 util.scss
文件中
1 | // 假定在页面 html 元素 font-size 为 16px 的屏幕宽 375px 下开发 |
将动态处理 html
元素的 font-size
的样式文件单独全局引入。
然后在你的 某个页面 的样式文件中引入你的功能函数。
1 |
|
就像上面代码那样,你只需要像之前你使用 px
进行布局一样简单,只不过是需要 加上 px2rem()
。