rem单位

绝地灬酷狼 2021-07-24 22:02 643阅读 0赞

rem单位
    	rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小
    
    	rem:html字体大小的多少倍
    
    	用法:
    	设置rem大小:
    		方式一
    			document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
    		方式二:
    			document.documentElement.style.fontSize='10vw';
    				即1rem等于屏幕宽度的10分之一,若宽为375px,则1rem=37.5px;
    	
    		750px是当前流行美工稿大小;
    		
    		所以根据用法可得:
    			保证在750px大小的设备当中,1 rem=100px;
    				在350px大小的设备中,1 rem=50px;
    				
    	监听窗口改变设置rem
    		window.addEventlistener('resize',fn);

代码示例；

<html>
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title></title>
    	<script src='js/underscore.js'></script>
    
    	<style>
    		div{ 
    			width:6rem;
    			height: 1rem;
    			background-color:orange;
    		}
    
    	</style>
    </head>
    <body>
    	<div></div>
    
    	<script>
    		//页面加载完毕后设置html字体大小
    		window.onload=function()
    		{ 
    			//获取标准rem单位
    			document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
    		}
    	</script>
    	
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是rem单位和em单位？它们有什么区别？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ \`rem\` 和 \`em\` 单位 ⭐ \`rem\` 单位（Root Em） ⭐ \`em\`

悠悠/ 2023年10月15日 15:53/ 0 赞/ 39 阅读

相关 uni-app使用rem单位布局

问题描述：一般使用uni-app是开发移动端，但是根据需求需要开发pc端又想用uni-app的技术，pc端使用rpx会出现不兼容，所有使用rem布局；解决思路：uni-ap

￡神魔★判官ぃ/ 2023年01月15日 11:29/ 0 赞/ 197 阅读

相关 css rem 单位_了解和使用CSS中的rem单位

css rem 单位 Gain an in-depth understanding of rem units in CSS, a relative sizing unit w

叁歲伎倆/ 2022年12月03日 01:39/ 0 赞/ 286 阅读

相关以rem为单位移动端页面开发

头部需要添加meta标签 <meta name="viewport" content="width=device-width, initial-scale= 1, m

小鱼儿/ 2022年09月21日 14:29/ 0 赞/ 205 阅读

相关 rem 单位和 em 单位

首先要知道：rem 和 em 是相对单位；我们通过代码来看 rem 和 em的使用和区别： em:相对于父级 <!doctype html>

灰太狼/ 2022年05月30日 10:45/ 0 赞/ 271 阅读

相关 CSS度量单位rem、em、vw、vh详解

CSS度量单位rem、em、vw、vh详解 <table> <thead> <tr> <th>单位</th> <th>说明</th> <

旧城等待，/ 2022年05月19日 06:52/ 0 赞/ 383 阅读

相关 css单位em、px和rem

在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解： em与px转换一般浏览器默认1em=16px，

绝地灬酷狼/ 2022年01月05日 09:27/ 0 赞/ 323 阅读

相关 css 小程序单位rpx及rem

rpx 微信小程序单位规定屏幕宽度为750rpx rpx和px的转换如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，

àì夳堔傛蜴生んèń/ 2021年09月19日 13:50/ 0 赞/ 501 阅读

相关 H5 px rem 单位换算

;(function(w) { var _config = w.comConfig, comFuc = {

悠悠/ 2021年09月14日 03:04/ 0 赞/ 482 阅读

相关 rem单位

rem单位 rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小 rem:html字体大小的多少

绝地灬酷狼/ 2021年07月24日 22:02/ 0 赞/ 644 阅读