移动web开发之rem布局

最新推荐文章于 2022-03-21 14:07:13 发布

一只前端小白

最新推荐文章于 2022-03-21 14:07:13 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏：日志文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_38944959/article/details/88783418

日志专栏收录该内容

51 篇文章

订阅专栏

本文介绍了REM单位的概念及其在响应式布局中的应用。REM单位是一种相对单位，基于HTML根元素的字体大小。文章详细阐述了如何通过媒体查询和JavaScript动态调整REM基准值，以实现不同屏幕尺寸下的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理论基础：
什么是rem?（fontsize of the root elelment）说白了就是字体单位，是指相对于根元素的字体大小的单位。
rem的优点：
相对于流式布局、响应式布局等布局方式，rem更为灵活，可以根据根不同屏幕尺寸上的根元素来等比例适配。
rem的基准值（根元素的字体大小）而网页的根元素就是html,所以我们只需要改变html的字体大小，就可以改变rem的基准值。
既然rem可以根据屏幕的大小来等比例的适配，那么rem的基准值我们就不能写为定值，这就需要我们动态的改变rem的基准值。

①通过媒体查询动态更改rem基准值

	/*利用媒体查询动态修改基准值*/
	@media screen and (max-width: 360px){
		html{
			font-size: 20px;
		}
	}
	@media screen and (max-width: 320px){
		html{ 
			font-size: 24px;
		}
	}

利用媒体查询更改rem基准值的问题：当前移动设备屏幕大小不一，我们如果一个个的写媒体查询，会比较麻烦
改进：
利用js动态的获取当前屏幕的大小来动态的改变基准值

let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;

console.log(htmlWidth);//当前屏幕宽度

let htmlDom=document.querySelector("html");

htmlDom.style.fontSize=htmlWidth/10+"px";//设置html的字体大小