2. 程式人生 > >rem手機端頁面自適應完美解決方案（最新）

rem手機端頁面自適應完美解決方案（最新）

阿新 • • 發佈：2017-09-06
有效 load rem tex width meta sel setattr name 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            ! function(e) {
                function t(a) {
                    if(i[a]) return i[a].exports;
                    
 
var n = i[a] = {
                        exports: {},
                        id: a,
                        loaded: !1
                    };
                    return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
                }
                var i = {};
                return
 
 t.m = e, t.c = i, t.p = "", t(0)
            }([function(e, t) {
                "use strict";
                Object.defineProperty(t, "__esModule", {
                    value: !0
                });
                var i = window;
                t["default"] = i.flex = function(e, t) {
                    
 
var a = e || 100,
                        n = t || 1,
                        r = i.document,
                        o = navigator.userAgent,
                        d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
                        l = o.match(/U3\/((\d+|\.){5,})/i),
                        c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
                        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
                        s = i.devicePixelRatio || 1;
                    p || d && d[1] > 534 || c || (s = 1);
                    var u = 1 / s,
                        m = r.querySelector(‘meta[name="viewport"]‘);
                    m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
                }, e.exports = t["default"]
            }]);
            flex(100, 1);
        </script>
    </head>
    <body>    
    </body>
</html>

註:不要手動設置viewport，該方案自動幫你設置！！！

代碼原理

這是阿裏團隊的高清方案布局代碼，所謂高清方案就是根據設備屏幕的DPR（設備像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由4個物理像素點組成）** 動態設置 html 的font-size, 同時根據設備DPR調整頁面的縮放值，進而達到高清效果**。

有何優勢

引用簡單，布局簡便
根據設備屏幕的DPR,自動設置最合適的高清縮放。
保證了不同設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解決移動端真實1px問題（這裏的1px 是設備屏幕上的物理像素）
如何使用

重要的事情說三遍！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
在相當數量的布局情境中（比如底部導航元素平分屏幕寬，大尺寸元素），你必須使用百分比或者flex才能完美布局！
看過 《手機端頁面自適應解決方案—rem布局》的朋友，應該對rem有所了解，這裏不再贅述，
此方案也是默認 1rem = 100px，所以你布局的時候，完全可以按照設計師給你的效果圖寫各種尺寸啦。
比如你在效果圖上量取的某個按鈕元素長 55px, 寬37px ，那你直接可以這樣寫樣式：

.myBtn {
　　　　width: 0.55rem;
　　　　height: 0.37rem;
}

出處鏈接：http://www.jianshu.com/p/985d26b40199

rem手機端頁面自適應完美解決方案（最新）

相關推薦

rem手機端頁面自適應完美解決方案（最新）

有效 load rem tex width meta sel setattr name <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

rem手機端頁面自適應布局（待修正下一篇完美布局）

ans 手機頁面 元素 blog 底部 max cli chang 都是 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

[html之rem]手機端頁面自適應解決方案—rem佈局進階版（附原始碼示例）

手機端頁面自適應解決方案—rem佈局進階版（附原始碼示例） 一年前筆者寫了一篇 《手機端頁面自適應解決方案—rem佈局》，意外受到很多朋友的關注和喜歡。但隨著時間的推移，該方案已然過時，故為大家介紹一個目前我極力推薦使用的，更加完美的方案——rem佈局（進階版） 另

手機端頁面自適應解決方案—rem布局

syn posit var cells document false 為什麽 gin element 只需在頁面引入這段原生js代碼就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (function (doc

移動端(手機端)頁面自適應解決方案—rem佈局篇

動端(手機端)頁面自適應解決方案—rem佈局 假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、淘寶移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種： 一、網易做法： 引入：頁面開頭處引入下面這段程式

手機端頁面自適應最簡單解決方案—rem佈局

原文連結：http://caibaojian.com/rem-responsive-2.html 使用rem實現自適應佈局，應該算是當前移動前端的一大趨勢，有些人對此還有點迷惑，搞不懂rem是如何實現自適應佈局，如何根據設計稿來調整rem的值？rem佈局如何用雪碧背景圖片？rem一定要載入js嗎？rem的根

手機端頁面自適應解決方案—rem佈局

該方案目前已過時，這裡是更加完美的替代方案——rem佈局(進階版) 相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如：百分比佈局，彈性佈局flex（什麼是flex），也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的

手機端頁面自適應解決方案—rem佈局進階版（附原始碼示例）

但隨著時間的推移，該方案已然過時，故為大家介紹一個目前我極力推薦使用的，更加完美的方案——rem佈局（進階版） 地址：http://www.jianshu.com/p/985d26b40199點選開啟連結 該方案使用相當簡單，把下面這段已壓縮過的 原生JS（原始碼

手機端頁面自適應—rem佈局

寫手機端頁面的時候要在meta加入，下面程式碼： <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">   name=”viewport” 

【移動端】基於rem實現手機端頁面自適應--動態改變dpr和font-size

這兩天還是在寫手機端的那個表單頁面，我好苦惱啊。明明在chrome上除錯的時候都是可以的，但是真的用手機去掃碼看的時候，就出現問題了。 蘋果手機麼有問題，都是根據dpr來設定meta標籤，動態設定font-size，顯示的跟預期的一樣。用三星手機掃也是可以的，

Html5移動端佈局及(rem佈局)頁面自適應佈局詳解（轉）

常見的頁面佈局方式有， 靜態佈局  px佈局 流式佈局（Liquid Layout） 主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用） 自適應佈局（Adaptive Layout） 即建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍 響應式

移動端自適應佈局解決方案：rem佈局

      之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！        2018.10.24更新       首先在html裡面設定一下視口： <meta

移動端自適應佈局解決方案——rem

自適應佈局方案有百分比佈局、flex佈局、彈性flex佈局等，但是都有一些缺點。 百分比佈局缺點：字型大小需要另外一套自適應方法來調整；當螢幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。 flex佈局、彈性flex佈局：在移動端會出現一些支援的相容問題。 rem W3C官

Html5移動端頁面自適應佈局詳解(rem佈局)

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title>

【Vue】Vue移動端頁面自適應解決方案

移動端頁面自適應解決方案 該方案使用相當簡單，把下面這段已壓縮過的 原生JS（僅1kb，原始碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 標籤中即可（注:不要手動設定viewport，該方案自動幫你設定） <scri

用css3解決移動端頁面自適應橫屏豎屏的思考

之前對於橫屏的webapp做過一些嘗試，但是始終不是很好的解決方案，前段時間又接觸了類似的需求，嘗試了感覺更好的解決方案。 這裡舉的例子還是平時常見的移動端的滑動頁面，也就是上下切換頁面的”H5“。 首先要做的準備： 1、html佈局 <div id="wrap"

手機端網頁自適應解決方案

<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchan

前端頁面 螢幕自適應 踩坑日記（一） rem

使用rem做尺寸單位時，尤其注意在非文字元素中的 inline-block，line-height,的使用，若沒有設定font-size，它是以根元素的font-size為基準的，若使用一定記得加font-size

使用pc端頁面自適應移動端

有時候我們會糾結PC頁面在手機頁面上無法正常顯示，超出螢幕，有些內容看不到，現在又了下面的程式碼，可以做到自適應手機螢幕寬度：在網頁的<head>中增加一個meta標籤：<meta name=”viewport” content=”width=device-

ios自適應問題---解決方案

1、首先需要配置視口viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">