移动端自适应所有尺寸屏幕的方法（适用所有尺寸屏幕，PC端也可以用）

最新推荐文章于 2024-06-24 15:43:32 发布

littlebearGreat

最新推荐文章于 2024-06-24 15:43:32 发布

阅读量1.1w

点赞数 6

分类专栏：前端笔记文章标签：手机移动 rem

本文链接：https://blog.csdn.net/littlebearGreat/article/details/53089824

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

先说代码，以后再解释：

移动端必须代码：

<meta name="viewport" content="width=device-widht,initial-scale=1.0,suer-scalable=1.0,maximum-scale=1.0,minimum-scale=1.0">

js动态计算rem代码：（此代码适配所有手机端）

1. 750的设计稿：

(function(){
	function w () {
		var r = document.documentElement;
		var a = r.getBoundingClientRect().width;
		if (a > 750) {
			a = 750;
		};
		rem = a / 7.5;
		r.style.fontSize = rem + 'px';
	};
	var t;
	w();
	window.addElementListener('resize',function(){
		clearTimeout(t);
		t = setTimeout(w,300)
	},false);
})();

2. 任意尺寸的设计稿（自适应）

假设设计稿的宽度为XXXpx；

(function () {
    var b = document.documentElement,
        a = function () {
            var a = b.getBoundingClientRect().width;
            b.style.fontSize = (a / XXX) * 100+ "px";
        }, c = null;
    window.addEventListener("resize", function () {
        clearTimeout(c);
        c = setTimeout(a, 300);
    });
    a();
})();

解释一下第二个代码中的 b.style.fontSize = (a /XXX) *100+ "px";

假设a=800,XXX=1000,也就是设计稿的宽度为1000px，（移动端的）屏幕宽800px;

要对应比例还要适配移动端，那么，设计稿上的1px在移动端上就是0.8px；这个0.8是(a /XXX)计算得来的。

而总不能每次测量的长度都乘以0.8吧？这岂不是要累死？这时，就用到了rem。

给html一个font-size:0.8px;这时移动端的1rem就等于设计稿的1px；

而Chrome浏览器，最小字体不得小于12px；

把字体放大100倍即可。就是：(a /XXX)*100

设置html font-size: (a /XXX)*100 px;就可以来什么屏适应什么屏，pc浏览器打开这种网页的话网页尺寸会随着浏览器窗口宽度的改变而改变