/ px转换rem
var IntervalId = 0;
window.onload = function() {
IntervalId = self.setInterval("RemCount()", 100);
};
function RemCount() {
var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (ClientWidth < 10) {
return;
}
var viewport = document.querySelector("meta[name=viewport]");
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
// 1rem = 10rem 默认最低比例为1:16,如果低于此比例会强制使用1:16,从而引起高度的巨大问题(自行测试)
var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (ClientWidth > 0) {
localStorage.ClientWidth = ClientWidth;
} else {
ClientWidth = localStorage.ClientWidth;
}
document.documentElement.style.fontSize = ClientWidth / 7.5 + 'px';
console.log("PHP页提示,宽度及rem比例:" + ClientWidth + " / " + (ClientWidth/7.5));
if (ClientWidth > 0) {
window.clearInterval(IntervalId);
}
}
px转换rem自适应手机样式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- !new function(){var a=this;a.width=750,a.fontSize=100,a.w...
- 分享技术,让快乐不再困难... 本文提供三个方案,从简到繁,目前项目使用方案三 一、自定义rem方案(简单暴力) ...