需要适配方案的,直接拷贝里面的js代码即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 让IE使用最新版本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- 必须 -->
<title>rem适配</title>
<script>
;(function(doc, win, width){
var docEl = doc.documentElement;
var head = doc.getElementsByTagName("head")[0];
var hFirst = head.firstChild || head.firstElementChild;
var cssEl = doc.createElement('style');
//手机横屏,竖屏可在此处设置
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
var recalc = function() {
var x;
var n = win.devicePixelRatio;
if (n >= 3) {
x = 3;
} else if (n >= 2){
x = 2;
} else {
x = 1;
}
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var pxPerRem = 100*(clientWidth / width);
cssEl.innerHTML = 'html{ font-size:' + pxPerRem + 'px!important; }';
docEl.setAttribute("data-dpr", x); //x 限制范围取值 1,2,3
head.appendChild(cssEl);
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,750)
// 若初始化为 750px, 此时整个屏幕宽度为 7.5rem
// 若初始化为 640px,(document, window,640), 此时整个屏幕宽度为 6.4rem
</script>
<style>
/*通过伪元素缩放处理 1px 像素问题*/
[viewpx]{ position: relative; padding:1px; }
[viewpx] *{ position: relative; }
[viewpx]:before{
box-sizing: border-box;
content:" ";
position:absolute;
top:-100%;
right:0;
width:200%;
height: 200%;
color:#e5e5e5;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
[viewpx="all"]:before{
border:1px solid #e5e5e5;
}
[viewpx~="top"]:before{
border-top:1px solid #e5e5e5;
}
[viewpx~="bottom"]:before{
border-bottom:1px solid #e5e5e5;
}
[viewpx~="left"]:before{
border-left:1px solid #e5e5e5;
}
[viewpx~="right"]:before{
border-right:1px solid #e5e5e5;
}
</style>
<style>
*{ margin:0; padding:0; box-sizing: border-box; }
html,body{ width: 100%;height: 100%;overflow: hidden;}
body{ overflow-y: auto; }
body::-webkit-scrollbar{ display: none; } /*影藏滚动条*/
/*750px设计稿,假设元素 .box 宽750px,高500px*/
.box{
width: 7.5rem;
height: 2rem;
font-size: 14px;
/* border:1px solid red; 这里1px相当于分辨率的2px或3px */
}
.aaa:before{
border-color: red; /*这里可改变 1px 边框颜色或其他样式*/
border-radius: 50%; /*改变圆角需要配合下面一起改*/
}
.aaa{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box aaa" viewpx="all"></div> <!-- 四边 -->
<div class="box" viewpx="left"></div> <!-- 左边 -->
<div class="box" viewpx="left top"></div> <!-- 左边,上边 -->
<div class="box" viewpx="left top right"></div> <!-- 左边,上边,右边 -->
</body>
</html>
关于meta标签的介绍
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。
后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持。
在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:
width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width"
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。
此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi 这个属性了,所以这个属性我们要避免进行使用 。