移动端rem适配，h5适配，1px像素问题

需要适配方案的，直接拷贝里面的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  这个属性了，所以这个属性我们要避免进行使用  。

移动端rem适配，h5适配，1px像素问题

需要适配方案的，直接拷贝里面的js代码即可

猜你喜欢