移動端布Rem

最後更新：2017-09-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：物理 str app type 資源 function element for http

一、最好用沒有之一

http://www.jianshu.com/p/b00cd3506782

雖然博主說這個方案已經到期了但是新方案還沒有理解就接著沿用這個

可以根據自己常用的設計稿的寬度修改 640 為 750

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">   <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  <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>=640){                    docEl.style.fontSize = ‘100px‘;                }else{                    docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;                }            };        if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);        doc.addEventListener(‘DOMContentLoaded‘, recalc, false);    })(document, window);</script>  /*你引進的資源*/<title>標題</title> </head><body> /*你的代碼*/</body></html>_minooo_連結：http://www.jianshu.com/p/b00cd3506782來源：簡書著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

二、高清方案

高清方案就是根據裝置螢幕的DPR（裝置像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由4個物理像素點組成）** 動態設定 html 的font-size, 同時根據裝置DPR調整頁面的縮放值，進而達到高清效果**。

此方案也是預設 1rem = 100px，所以你布局的時候，完全可以按照設計師給你的寫各種尺寸啦。

注意：

rem適合寫固定尺寸。其餘的根據需要換成flex或者百分比。
在X5核心的瀏覽器下，字型會自動放大，解決方案：

*, *:before, *:after { max-height: 100000px }

如果元素的寬度超過寬度的一半（寬為640或750），果斷使用百分比寬度，或者flex布局。

　　否則可能會有橫向捲軸。

‘use strict‘;/** * @param {Boolean} [normal = false] - 預設開啟頁面壓縮以使頁面高清;   * @param {Number} [baseFontSize = 100] - 基礎fontSize, 預設100px; * @param {Number} [fontscale = 1] - 有的業務希望能放大一定比例的字型; */const win = window;export default win.flex = (normal, baseFontSize, fontscale) => {  const _baseFontSize = baseFontSize || 100;  const _fontscale = fontscale || 1;  const doc = win.document;  const ua = navigator.userAgent;  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);  const isUCHd = UCversion && parseInt(UCversion[1].split(‘.‘).join(‘‘), 10) >= 80;  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);  let dpr = win.devicePixelRatio || 1;  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {    // 如果非iOS, 非Android4.3以上, 非UC核心, 就不執行高清, dpr設為1;    dpr = 1;  }  const scale = normal ? 1 : 1 / dpr;  let metaEl = doc.querySelector(‘meta[name="viewport"]‘);  if (!metaEl) {    metaEl = doc.createElement(‘meta‘);    metaEl.setAttribute(‘name‘, ‘viewport‘);    doc.head.appendChild(metaEl);  }  metaEl.setAttribute(‘content‘, `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);  doc.documentElement.style.fontSize = normal ? ‘50px‘ : `${_baseFontSize / 2 * dpr * _fontscale}px`;};_minooo_連結：http://www.jianshu.com/p/985d26b40199來源：簡書著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

移動端布Rem

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More