rem自适应

全屏rem(设计稿px/100)(宽度或高度改变都会影响,常用于全屏网页)(需放于body之后,body添加base-width和base-height属性,对应设计稿尺寸,如base-width=“1920”)

!
function() {
    var d = 0;
    function t() {
        var t, e = document.documentElement.clientWidth,
        n = document.documentElement.clientHeight,
        m = document.body.getAttribute("base-width"),
        i = document.body.getAttribute("base-height"),
        a = 100; (1 == (d = m && !i ? 1 : !m && i ? 2 : m && i ? 3 : 0) ? (t = e / m * 100, a = Math.max(100, 1024 / m * 100)) : 2 == d ? (t = n / i * 100, a = Math.max(100, 1366 / i * 100)) : 3 == d && (t = 100 * (m / i < e / n ? n / i: e / m), a = Math.max(100, 100 * Math.min(1024 / m, 1366 / i))), t) && (t = Math.min(t, a), document.getElementsByTagName("html")[0].style.fontSize = t + "px")
    }
    t(),
    0 != d && window.addEventListener("resize", t)
} ()

压缩后:

        function setRootFontSize(){var t,e,n=document.body,o=n.getAttribute("base-width"),i=n.getAttribute("base-height");if(o&&(t=document.documentElement.clientWidth/o),i&&(e=document.documentElement.clientHeight/i),t||e){var d=Math.min(t||1,e||1);1<d&&(d=1),document.getElementsByTagName("html")[0].style.fontSize=100*d+"px"}}window.addEventListener("resize",setRootFontSize),setRootFontSize()
    

2:普通只看宽度(如1920宽的换算为px=设计稿长度/192)(会根据宽度放大或缩小页面)

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);

 3.1920为设计稿宽度,实际1rem=100px

	function setRootFontSize(){var t,e,o=1920,i=0;o&&(t=document.documentElement.clientWidth/o),i&&(e=document.documentElement.clientHeight/i);var d=1.5;if(t||e){var m=Math.min(t||d,e||d);d<m&&(m=d),document.getElementsByTagName("html")[0].style.fontSize=100*m+"px"}}window.addEventListener("resize",setRootFontSize),setRootFontSize()

  

posted @ 2020-03-13 10:53  A-zero  阅读(92)  评论(1编辑  收藏  举报