关于css3样式rem的自适应属性问题

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于css3样式rem的自适应属性问题相关的知识，希望对你有一定的参考价值。

html的宽度为640px时，我设置font-size设置为100%；字体1rem就是16px，元素宽度1rem等于16px；那么问题来了；当html的宽度为320px时，我设置font-size设置为50%；字体1rem就是8px，但是元素宽度1rem却不等于8px；请问有没有什么完美的解决方法。

把字体一开始就设置62.5%，然后1rem就等于10px。希望能帮助到你。追问

1rem等于10px只能对字体生效

追答

好吧，没仔细去研究，帮不了你了。

参考技术A 是不是等于12px？

自适应

在最近的移动端布局当中，最炙手可热的方式便是使用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;
}