rem自适应布局小结001

最新推荐文章于 2024-09-04 10:43:05 发布

前端爱好者。

最新推荐文章于 2024-09-04 10:43:05 发布

阅读量719

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=12aai1aa&title=rem%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E5%B0%8F%E7%BB%93001

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

在最近的移动端布局当中，最炙手可热的方式便是使用rem进行元素的布局。以下便是从最近的文章中所总结出来的一点东西。

首先，我们必须有以下的疑问：

rem的本质是什么？

rem如何实现自适应布局？

如何根据设计稿来调整rem的值？

rem布局是能纯CSS还是必须JS进行辅助？

接着，我们来稍微解答或者解决以上的问题

一.rem的自适应原理

rem（font size of the root element）是指相对于根元素的字体大小的单位，既是一个相对的计量单位。而于此类似的便是em（font size of the element）是指相对于父元素的字体大小的单位。所以，两个都是相对计量单位。区别在于一个相对于根元素，一个相对于父元素。rem就是根据HTML的font-size大小来进行的变化。基于该原理，可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现自适应布局。

二.rem 的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

三.移动端使用rem布局

　　在采用rem之前移动端的主流适配方案

　　1.流式布局（百分比布局）

　　优点: 简单方便,使用简单,只需固定高度即可,宽度自适应；

　　缺点: 在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调；

　　2.固定宽度

　　优点: 与设备宽度做等比缩放；

　　缺点: 在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的,但最后改版了，采用了rem；

　　3.响应式做法

　　优点:可以节约成本，不用再专门为自己的网站做一个webapp的版本,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位；

　　缺点:工作量大，维护性难,这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做；

　　采用rem的优势

　　开头提过rem是指相对于根元素的字体大小的单位,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

html{
　　font-size:10px;
}

.btn{
　　width:6rem; 
　　height:3rem; 
　　line-height:3rem; 
　　font-size:1.2rem; 
　　border: 1px solid #333; 
　　color: #333; 
　　border-radius: 0.5rem; 
　　text-align: center; 
　　margin: 10px auto;
}