使用rem做自适应

最新推荐文章于 2024-07-26 11:41:15 发布

乾卦三爻

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46325225/article/details/124163613

版权

1、什么是自适应
自适应区别于响应式布局最大的优点是可以适应视口宽度为任意大小的设备。
2、什么是rem
rem是相对于根元素也就是html的字体大小单位，容易与em混淆，em指的是相对于父元素的字体大小，如果需要做自适应，那么应当使用rem做全局处理，而不是使用em。
3、什么是rem基准值
rem基准值就是rem与px之间的换算关系，个人习惯上喜欢设置为1rem=100px,在配置文档中设置好基准值之后，输入px单位会自动提示转换为rem单位。
在这里插入图片描述
4、rem的计算公式：设备视口宽度 / 设计稿宽度 * 100，既然做自适应，那么视口的宽度肯定是不固定的，这里通常使用100vw来表示视口宽度；
5、为了避免设备视口宽度可以无限放大，可以使用媒体查询做出限制，当设备的宽度超出某一个值之后将内容大小固定，将不再随设备的视口大小进行变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		html{
			//在根元素中计算基准值字体大小，设备宽度 / 设计稿宽度 * 100
		    font-size: calc(100vw / 375 * 100);
		}
		body{
		    font-size: 16px;
		}
		//使用媒体查询监测设备视口宽度，当视口宽度大于最大移动设备宽度时，将内容的大小设置为固定值，不再随设备视口大小进行变化
		@media only screen and (min-width:769px){
			html{
				//将根元素字体大小设置为需求最大宽度的基准值大小
				font-size: calc(769px / 375 * 100);
			}
			body{
				//将内容宽度固定设置为需求最大宽度
				width: 769px;
				margin: auto;
			}
		}
		#box{
			width: 1rem;
			height: 1rem;
			background-color: aqua;
			font-size: 0.16rem;
		}
	</style>
	<body>
		<div id="box">
			测试rem
		</div>
	</body>
</html>

乾卦三爻

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用rem做自适应

1、什么是自适应自适应区别于响应式布局最大的优点是可以适应视口宽度为任意大小的设备。2、什么是remrem是相对于根元素也就是html的字体大小单位，容易与em混淆，em指的是相对于父元素的字体大小，如果需要做自适应，那么应当使用rem做全局处理，而不是使用em。3、什么是rem基准值rem基准值就是rem与px之间的换算关系，个人习惯上喜欢设置为1rem=100px,在配置文档中设置好基准值之后，输入px单位会自动提示转换为rem单位。4、rem的计算公式：设备视口宽度 / 设计稿宽度 *
复制链接

扫一扫