对于移动端使用rem长度进行设备自适应的简单理解

miao_zz

已于 2023-07-22 13:35:25 修改

阅读量140

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2023-07-22 13:29:22 首次发布

本文链接：https://blog.csdn.net/qq_37117408/article/details/131866753

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

对于移动端使用rem长度进行设备自适应的简单理解

- 效果示例图
- 示例代码

 1.一般原型设计稿ui图的像素宽度是750px

 2.为了在像素为750px的屏幕上显示,设计稿上宽度为686px,高度为72px的搜索框，我们根元素font-size需要设置为多少，才能正常显示?

 	1rem代表的是当前屏幕下html根元素设置的font-size值，如果我们没有设置根元素的font-size值，那么根元素的font-size取默认值16px，即:1rem=16px;则1px=0.0625rem;

	 显然为了适配不同手机屏幕的尺寸，我们需要根据当前设备宽度来设置根元素font-size值，这样我们程序中设置的rem长度才能适配当前屏幕的大小。

	为了好进行px到rem长度的换算，我取设备宽度为750px的浏览器根元素的font-size值为100px，即1rem=100px；则1px=0.01rem;

	 同理其他设备宽度设置的font-size值，为：deviceWidth:设备宽度；fontSize:根元素font-size值
	  fontSize=(deviceWidth*100px)/750px;(其中：750px为原型设计搞的宽度，100px为750px屏幕下浏览器根元素的font-size值)；
              =(deviceWidth/7.5)+'px';

 当然这里设置750px原型搞下，根元素font-size=100px，不是固定值，只是我自己为了方便换算，你可以随便设置

效果示例图

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			.search-wrap {
				width: 6.86rem;
				height: 0.72rem;
				border-radius: 0.36rem;
				opacity: 0.7;
				border: 0.02rem solid #696B6E;
				margin: 0.12rem auto;
			}
		</style>
	</head>
	<body>
		<div class="search-wrap"></div>
	</body>
	<script type="text/javascript">
		/**
		 * 1.一般原型设计稿ui图的像素宽度是750px
		 * 
		 * 2.为了在像素为750px的屏幕上显示,设计稿上宽度为686px,高度为72px的搜索框，我们根元素font-size需要设置为多少，才能正常显示?
		 * 
		 *   1rem代表的是当前屏幕下html根元素设置的font-size值，如果我们没有设置根元素的font-size值，那么根元素的font-size取默认值16px，即:1rem=16px;则1px=0.0625rem;
		 * 
		 *   显然为了适配不同手机屏幕的尺寸，我们需要根据当前设备宽度来设置根元素font-size值，这样我们程序中设置的rem长度才能适配当前屏幕的大小。
		 * 
		 *   为了好进行px到rem长度的换算，我取设备宽度为750px的浏览器根元素的font-size值为100px，即1rem=100px；则1px=0.01rem;
		 * 
		 *   同理其他设备宽度设置的font-size值，为：deviceWidth:设备宽度；fontSize:根元素font-size值
		 *   fontSize=(deviceWidth*100px)/750px;(其中：750px为原型设计搞的宽度，100px为750px屏幕下浏览器根元素的font-size值)；
		 *           =(deviceWidth/7.5)+'px';
		 * 
		 *   当然这里设置750px原型搞下，根元素font-size=100px，不是固定值，只是我自己为了方便换算，你可以随便设置
		 *   
		 * **/
		function getHtmlFontSize() {
			//获取设备宽度
			let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
			console.log("[设备宽度]", deviceWidth);
			if (deviceWidth >= 750) {
				deviceWidth = 750;
			} else if (deviceWidth <= 320) {
				deviceWidth = 320;
			}
			//设置html的字体大小为：1rem=100px;以设计原型750，如果设计稿是640px，font-size=100px,则为deviceWidth/6.4
			document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
		}
		getHtmlFontSize();
		window.addEventListener("resize", getHtmlFontSize)
	</script>
</html>