移动端rem和px的转换

最新推荐文章于 2025-06-10 11:42:44 发布

原创最新推荐文章于 2025-06-10 11:42:44 发布 · 878 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

1、参考

使用css方法设置 https://blog.csdn.net/unbreakablec/article/details/87268904

使用js方法设置https://www.cnblogs.com/web-wjg/p/7872468.html

2、使用css方法设置1rem=10px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  html{
	font-size:62.5%; /*1rem=10px*/
  }
  .test1{
	font-size:16px;
  }
  .test2{
	font-size:1.6rem;
  }
  .test3{
	width:100px;
	height:100px;
	background:pink;
	margin:10px;
  }
  .test4{
	width:10rem;
	height:10rem;
	background:pink;
	margin:10px;
  }
  .test5{
	width:300px;
	height:200px;
	display:flex;
	border:1px solid pink;
  }
  </style>
</head>
<body>
    <div class="test1">这里的字体是16px</div>
	<div class="test2">这里的字体是1.6rem</div>
	<div class="test5">
		<div class="test3">宽100px高100px=宽10rem高10rem</div>
		<div class="test4">宽100px高100px=宽10rem高10rem</div>
	</div>
  <script>
  </script>
</body>
</html>

3、使用js方法设置1rem=10px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .test1{
	font-size:16px;
  }
  .test2{
	font-size:1.6rem;
  }
  .test3{
	width:100px;
	height:100px;
	background:pink;
	margin:10px;
  }
  .test4{
	width:10rem;
	height:10rem;
	background:pink;
	margin:10px;
  }
  .test5{
	width:300px;
	height:200px;
	display:flex;
	border:1px solid pink;
  }
  </style>
   <script>
	(function() {
		var html = document.documentElement;
		//width代表实际宽度,获取当前屏幕可视区域大小
		var width = html.getBoundingClientRect().width;
		// design代表设计宽度
		var design=750
		html.style.fontSize = width / design*20 + 'px';//至于除数15可自行设置
		//1rem=10px;
	})()
  </script>
</head>
<body>
    <div class="test1">这里的字体是16px</div>
	<div class="test2">这里的字体是1.6rem</div>
	<div class="test5">
		<div class="test3">宽100px高100px=宽10rem高10rem</div>
		<div class="test4">宽100px高100px=宽10rem高10rem</div>
	</div>

</body>
</html>