zoukankan      html  css  js  c++  java
  • 移动端rem单位适配使用

    1.适配方法

    //缩放比例
    !function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;
    var t=a.createElement("meta");
    if(t.setAttribute("name","viewport"),t.setAttribute("content","initial-scale="+s+", maximum-scale="+s+", minimum-scale="+s+", user-scalable=no"),d.firstElementChild)d.firstElementChild.appendChild(t);
    else{var i=a.createElement("div");
    i.appendChild(t),a.write(i.innerHTML)}}function n(){var e=Math.min(d.getBoundingClientRect().width,750);r=100*e/t.desinWidth,d.style.fontSize=r+"px"}var a=e.document,d=a.documentElement,o=(e.devicePixelRatio,1),s=1;i();var l,r=100;
    t.desinWidth=640,t.baseFont=18,t.init=function(){e.addEventListener("resize",function(){clearTimeout(l),l=setTimeout(n,300)},!1),e.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(l),l=setTimeout(n,300))},!1),"complete"===a.readyState?a.body.style.fontSize=t.baseFont*o+"px":a.addEventListener("DOMContentLoaded",function(){a.body.style.fontSize=t.baseFont*o+"px"},!1),n(),d.setAttribute("data-dpr",o)}}(window,window.adaptive||(window.adaptive={}));
    window['adaptive'].desinWidth = 750;
    window['adaptive'].baseFont = 18;
    window['adaptive'].init();

    2.rem中border中的1px样式

    使用sass的写法

    @mixin border-1px($cl,$position){
    position: relative;
    border:none;
    &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    200%;
    height: 200%;
    #{$position}: 1px solid $cl;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
    pointer-events: none;
    }

    }

    css写法

    /*border*/
    .border-bottom-1px{
    position: relative;
    border:none;
    }
    .border-bottom-1px:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    200%;
    height: 200%;
    border-bottom: 1px solid #e9edf5;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
    pointer-events: none
    }
    .border-top-1px{
    position: relative;
    border:none;
    }
    .border-top-1px:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    200%;
    height: 200%;
    border-top: 1px solid #e9edf5;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
    pointer-events: none
    }
    .border-left-1px{
    position: relative;
    border:none;
    }
    .border-left-1px:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    200%;
    height: 200%;
    border-left: 1px solid #e9edf5;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
    pointer-events: none
    }

    3.各别情况需要计算rem时使用window.innerWidth/750*105进行适配计算!!!!

  • 相关阅读:
    机器学习:不平衡信息有序平均加权最近邻算法IFROWANN
    项目代码管理工具Git的总结
    jquery的返回顶端的功能实现
    web项目中登陆超时的功能实现(基于C#)
    存储过程:项目中使用存储过程的一个实例
    Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能
    网站开发常用Sql语句
    维护基于ASP.NET的网站的学习-SqlCommand类介绍及存储过程
    本地向服务器上传文件的方式-FTP工具上传
    本地向服务器上传文件的方式-本地资源映射到服务器
  • 原文地址:https://www.cnblogs.com/qdlhj/p/8006236.html
Copyright © 2011-2022 走看看