WAP移动端页面显示，文字和内容等比缩放的实现

最新推荐文章于 2025-05-22 09:54:27 发布

Young-杨

最新推荐文章于 2025-05-22 09:54:27 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：从入门到放弃

本文链接：https://blog.csdn.net/vailook/article/details/53758889

从入门到放弃专栏收录该内容

86 篇文章

订阅专栏

本文介绍了一种在不同显示比例下保持页面元素等比缩放的方法，通过使用rem单位和JavaScript动态调整字体大小实现自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同一个页面，在不同显示比例下如何等等比缩放而使页面不会变形

比如同一个页面下，372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放

比例始终显示协调，不用重复调试，其中一个重要的元素是将所有定义宽高的元素设置为rem

rem是一个相对大小的值，它相对于根元素<html>，比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。然后其他的字体就是将你要的值除以14得到的值；比如iphone5主题大小是320px；换算成rem就是320/14=22.85714rem； padding的24px也就是24/14=1.714285714285714rem，以此类推。上面的14是个变量，相对于你对根元素html字体大小的设定，如果你设定的是62.5%，那除数就变成10了，对照表如右图：用这个rem单位的好处有啥我不知道，不过如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了，这比em简单多了，到现在我都没搞清楚em和px之间是如何换算的。另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持，如果你要考虑ie8及一下，可以设置个px再设置个rem就可以了。

如上图，当然只有rem元素还是不够的，以下是整个过程的实现。

代码如下

<div class="header">
		css中单位px和em，rem的区别！<br>
		国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面给大家详细介绍下。

	</div>

一、在head里面加入

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
二、CSS中添加代码 
html{font-size: 625%;}
	body {font-family: "Microsoft YaHei";color: #333;width: 100%;max-width: 640px;min-width: 320px;margin:0 auto;}
.header{
		height: 1rem;
		background: #ccc;
		font-size: 0.2rem;
		text-align: center;
		padding-top: 0.1rem
		
	}
移动端设置页面最大宽度640px  最小宽度320px
font-size:625% 是相对于设备默认的字体大小，那么接下来就要定义设备的默认字体大小 font-size，

三、header 中加入JAVASCRIPT 代码
<script src="http://www.meiya.org.cn/style/js/jquery-1.9.1.min.js"></script>
	<script>
	$(function  () {
		function resi() {
			var html = document.querySelector("html");
			var wW = document.body.clientWidth || document.documentElement.clientWidth;
			var maxW = 640;
			var minW = 320;
			if (wW > maxW) wW = maxW;
			var ratio = wW / minW;
			html.style.fontSize = 50 * ratio + "px"
		}
		window.addEventListener("DOMContentLoaded", function() {
			var bodys = document.querySelector("body").style;
			bodys.opacity = "1";
			bodys.filter = "alpha(opacity=100)";
			resi()
		});
		window.addEventListener("resize", resi);

	});		
	</script>	
以上代码根据设备宽度自动匹配字体大小，从而实现等比缩放的效果。