關(guān)于rem手機(jī)適配的問(wèn)題

如題，之前一直在做pc后臺(tái)系統(tǒng)，突然給了任務(wù)做個(gè)h5應(yīng)用有點(diǎn)不知所措。。我設(shè)的fontsize62.5%，然后看了下字體1.6rem瀏覽器顯示出來(lái)的是16px，為啥我給個(gè)div寬度定2rem卻不是20px？

回答

編輯回答

尐飯團(tuán)

rem布局需要引入一個(gè)自調(diào)用函數(shù)(網(wǎng)易的做法)

(function(doc, win) {

    var docEl = doc.documentElement,

        isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,

        dpr = window.top === window.self ? dpr : 1, //被iframe引用時(shí)，禁止縮放

        dpr = 1,

        scale = 1 / dpr,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    docEl.dataset.dpr = dpr;

    var metaEl = doc.createElement('meta');

    metaEl.name = 'viewport';

    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;

    docEl.firstElementChild.appendChild(metaEl);

    var recalc = function() {

        var width = docEl.clientWidth;

        if (width / dpr > 750) {

            width = 750 * dpr;

        }

        // 乘以100，px : rem = 100 : 1

        docEl.style.fontSize = 100 * (width / 750) + 'px';

    };

    recalc()

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

})(document, window);

處理后100px = 1rem;

2018年7月6日 02:28

編輯回答

萌二代

瀏覽器默認(rèn)最小字體是12px

所以設(shè)置文字大小為62.5%，文字大小會(huì)生效，但rem還是已12為基準(zhǔn)，可以這樣

我們可以設(shè)置用100來(lái)?yè)Q算

html{
    font-size:625%；
}
div{
    font-size: 0.16rem; /*真實(shí)值： 16px   怎么來(lái)的  16/100=0.16*/
    width: 1rem; /*真實(shí)值： 100px 怎么來(lái)的 100/100=1*/
}

2018年5月2日 03:40

編輯回答

撿肥皂

看不到完整代碼不清楚問(wèn)題出在哪。我常用移動(dòng)端rem方法是這樣的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>title</title>
    <script>
      //rem設(shè)置 layout_width是layout設(shè)計(jì)寬度
      var layout_width = 750;
      (function (doc, win) {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= layout_width) {
              docEl.style.fontSize = '100px';
            } else {
              docEl.style.fontSize = 100 * (clientWidth / layout_width) + 'px';
            }
          };

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

layout_width是ui設(shè)計(jì)的實(shí)際頁(yè)面寬度，現(xiàn)在流行用750px。這樣處理以后，1rem=100px這樣做換算就可以了，用這個(gè)方法做了很多項(xiàng)目了，沒(méi)有出現(xiàn)過(guò)rem不符的現(xiàn)象，你可以試試。

2018年4月2日 03:28