Адаптивное личное понимание и сбор на мобильных терминалах - rem

внешний интерфейс CSS

rem—— Лучше адаптироваться к мобильному терминалу. Давно хотел узнать об этом агрегате и сегодня наконец увидел. Читайте много блогов. У меня наконец появилась идея. (И вх, вв здесь, не буду писать, пока не разберусь.)

1.рем можно найти вhtml，bodyв настройкахfont-sizesize, а затем преобразовать его в соответствии с размером корневого элемента. например: размер корневого элемента установлен на:font-size：100px; есть div шириной50px, что можно записать как-width:0.5rem.

2. Как правило, чертеж мобильного терминала составляет 640 пикселей/750 пикселей, поскольку dpr мобильного телефона равен 2. Только у яблока плюс 3, а ширина 414. Возьмем в качестве примера чертеж дизайна 750, на этот раз вам нужно только вставить следующий код в свой код

<script>   
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

Введя этот код, вы можете преобразовать ширину и высоту в рем в соответствии с вашим исходным чертежом, который также равен 1 рем = 100 пикселей;

Введение этого кода рассчитано по расчетному чертежу 1рем:75px.

<script type="text/javascript">
	!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("将根据已有的meta标签来设置缩放比例");var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));
</script>

3. Еще одна хорошая вещьhotcss.js. Это не фреймворк и не библиотека пользовательского интерфейса. Единицей установленного шрифта является px, который автоматически преобразуется в rem без самостоятельного вычисления. Он может решить проблему нечетких снимков в большей степени.

gitHub-адрес hotcss:GitHub.com/IMO Чен/горячая…

Новичок в интерфейсе, пожалуйста, оставьте сообщение, если что-то не так, и обязательно активно измените его.

Категории