移动端rem配置（js动态改变和css @media配置）

最新推荐文章于 2022-06-24 11:45:29 发布

小猪佩阳

最新推荐文章于 2022-06-24 11:45:29 发布

阅读量4.2k

点赞数 3

分类专栏： html js css

本文链接：https://blog.csdn.net/qq_25065257/article/details/80281523

版权

js 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

一：js动态改变rem

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if(!clientWidth) return;
			if(clientWidth >= 375) {
				docEl.style.fontSize = '100px';
			} else {
				docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
			}
		};

	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

二：css @media配置rem

html{font-size:16px;}
@media screen and (min-width:375px){html{/* iPhone6的375px尺寸作为16px基准，414px正好18px大小,600 20px */font-size:calc(100% + 2 * (100vw - 375px) / 39);font-size:calc(16px + 2 * (100vw - 375px) / 39);}}
@media screen and (min-width:414px){html{/* 414px-1000px每100像素宽字体增加1px(18px-22px) */font-size:calc(112.5% + 4 * (100vw - 414px) / 586);font-size:calc(18px + 4 * (100vw - 414px) / 586);}}
@media screen and (min-width:600px){html{/* 600px-1000px每100像素宽字体增加1px(20px-24px) */font-size:calc(125% + 4 * (100vw - 600px) / 400);font-size:calc(20px + 4 * (100vw - 600px) / 400);}}
@media screen and (min-width:1000px){html{/* 1000px往后是每100像素0.5px增加 */font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size:calc(22px + 6 * (100vw - 1000px) / 1000);}}
body{max-width: 640px;margin: 0 auto;}