rem是什么?响应式布局中rem的用法

2020-05-2716:28:40WEB前端开发Comments2,398 views字数 704阅读模式

1.rem是什么呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过rem计算的规则是依赖根元素,em是依赖父元素计算。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

2.为什么要用rem呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

首先我们要了解移动端最麻烦的是什么?由于不同分辨率的适配,具体来说,有的屏幕宽750px,有的屏幕宽640px,有的甚至更宽,导致如果你写固定px,那么要么小的放不满,要么大的有大片留白。然而我们用rem可以有效解决这个问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

3.如何用rem实现页面等比例适应设备呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

解决方法:rem + less + 媒体查询文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

(1)动态设置html标签font-size大小文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

假设设计稿是750px,然后我们把整个屏幕划分成15等份,每一份作为html中的字体大小,这里一份就是50px,那么当设备为750px时,一个100*100px的页面元素在750px的屏幕下,它转换为rem为单位就是2*2rem,长和宽的比例是1:1;当设备为320px时,html字体大小为21.33px,一个100*100px的页面元素在320px的屏幕下,为2*2rem,2rem=42.66px,长和宽的比例仍旧是1:1,这样我们就能实现在不同屏幕下,页面元素盒子等比例缩放的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

(2)页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

注:1.屏幕宽度/划分的份数 就是html中的font-size的大小文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

2. 关于媒体查询和less可自行百度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

4.代码实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

rem是什么?响应式布局中rem的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

rem是什么?响应式布局中rem的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

作者:Angus安格斯文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19320.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/19320.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定