移動端頁面單位rem

來源:互聯網
上載者:User

今天有個朋友在群裡上傳了一份案例,點進去研究了起來,發現了rem這個單位。
然後我就開始百度rem,搜到幾篇好文章,跟大家分享一下,

以下代碼,是在朋友所發案例中拷貝的

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
       
</body>
</html>
<script>

        //auto adaptation
        var calculate_size = function () {
            var BASE_FONT_SIZE = 100;
   
            var docEl = document.documentElement,
                clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 320) + 'px';
        };
   
        // Abort if browser does not support addEventListener
        if (document.addEventListener) {
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            window.addEventListener(resizeEvt, calculate_size, false);
            document.addEventListener('DOMContentLoaded', calculate_size, false);
            calculate_size();
        }
   
</script>

關於var BASE_FONT_SIZE = 100;
如下解釋:
根項目的值可以任意的去定義,
但是建議最小定義20px以上,
還有定義的時候要考慮方便自己換算,
有些人定100px,
但是不要定義10px,
因為chrome不支援中文字型小於12px,
所以會導致當計算小於12px的時候,
會預設取12px去計算,導致中文版chrome的rem計算不準確。

關於clientWidth
在Google瀏覽器手機模式下測試,
iphone4,5,6,顯示為980px,

clientWidth參考文章:
http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html
http://www.cnblogs.com/kongxianghai/p/4192032.html


補充關於clientWidth / 320
320沒啥用
現在一般是640的,640是個變數
設計稿的寬一般都是640px
如果設計師給你的設計稿是670px的
就把640改為670



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。