用REM/VW单位进行移动端适配的最佳实现

最新推荐文章于 2022-07-24 19:42:30 发布

大恒大

最新推荐文章于 2022-07-24 19:42:30 发布

阅读量139

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/kindmb/article/details/109713150

版权

前端专栏收录该内容

32 篇文章 3 订阅

订阅专栏

本文介绍了如何使用REM和vw单位实现响应式网页设计，通过JavaScript实时调整`<html>`元素的字体大小，确保在不同设备上具备良好的可伸缩性。同时，对比了vw单位在CSS3中的应用，以及配合em单位创建自适应文本大小的实例。

摘要由CSDN通过智能技术生成

REM+JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aaa</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no">
		<style>
			:root{font-size: 20px;} 
		</style>
	</head>
	<body>
		TEST  TEST  TEST  TEST  TEST  TEST  TEST  
		<script>
			 let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
			 let rootDom = document.querySelector('html');
			 rootDom.style.fontSize = rootWidth / 10 + 'px';
		</script>
	</body>
</html>

VW模式:
vw单位是CSS3中的一个单位,代表屏幕横向尺寸的1%,用它做尺寸标准,可以完美适配缩放.

<style>
	html{font-size: 5vw;} 
</style>

<p style="font-size:0.8em">自适应大小</p>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大恒大

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用REM/VW单位进行移动端适配的最佳实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>aaa</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no"> <style>
复制链接

扫一扫