1、響應式布局：px
- 概念：
響應式網頁設計就是一個網站能夠兼容多個終端-----而不是為每個終端做一個特定的版本；
其目的是為用戶提供更加舒適的界面和更好的用戶體驗；
- 優缺點：
- 優點：
- 面對不同分辨率設備靈活性強；
- 能夠快捷解決多設備顯示適應問題；
- 缺點：
- 兼容各種設備工作量大，效率低下；
- 代碼累贅，會出現隱藏無用代碼，加載時間過長；
- 優點：
- 步驟：
- 設置meta標簽（App.vue或者首html文件）
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> //user-scalable屬性能夠解決ipad切換橫屏之后觸摸才能回到具體尺寸的問題。
- 通過媒體查詢來設置樣式media query（media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現）
@media screen and (max-width:980px){//設置不同設備中div的布局方式 #head { … } #content { … } #footer { … } }這里面的樣式會覆蓋掉之前所定義的樣式。 - 設置多種視圖寬度
/**ipad**/ @media only screen and (min-width:768px)and(max-width:1024px){ } /**iphone**/ @media only screen and (width:320px)and (width:768px){ } - 字體設置（一般rem更方便使用）https://www.cnblogs.com/YYvam1288/p/5123272.html
@media screen and (min-width: 768px) { html, body { font-size: 8px !important; } } @media screen and (min-width: 992px) { html, body { font-size: 10px !important; } } @media screen and (min-width: 1200px) { html, body { font-size: 14px !important; } } @media screen and (min-width: 1500px) { html, body { font-size: 16px !important; } } html, body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif; height: 100%; width: 100%; margin: 0px; padding: 0px; } * {//怪異盒模型也就是IE盒模型 box-sizing: border-box; }
- 設置meta標簽（App.vue或者首html文件）
- 響應式布局所涉及到的問題：
- 圖片液態化：
img{//要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）,不可以使用width:100%,會讓圖片跟他的容器一樣寬 max-width:100%; height:auto; }
- 圖片液態化：
2、彈性布局（百分比布局、流式布局）
百分比能夠設置的屬性是width、height、padding、margin。其他屬性比如border、font-size不能用百分比設置的。
如果用百分比寫width，那么指的是父元素width的百分之多少。
如果用百分比寫height，那么指的是父元素height的百分之多少。
如果用百分比寫padding，那么指的是父元素width的百分之（無視padding）多少，無論是水平的padding還是豎直的padding。
如果用百分比寫margin，那么指的是父元素width的百分之（無視padding）多少，無論是水平的margin還是豎直的margin。
不能用百分比寫border的寬度
3、rem布局（css3新增屬性）插件：cssrem（IE8一下不兼容）
- 概念：rem是相對於根元素（html）的字體大小的單位；
em一般都是以<body>的“font-size”為基准（表示父元素的字號的倍數）；
body{
font-size:10px;
}
p{
font-size:1.4em;//14px
}
例子：
bootstrap樣式表，html {font-size:62.5%;} body {font-size:14px;}，
p{font-size:1em;)//14px
- 優點：既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應；
- rem的計算方式：
1、確定基數：一般10px，自己記住就行，不用寫進代碼里 2、html {font-size:百分數;} 百分數=基數/16 基數10 百分數62.5% 基數14 百分數87.5% 3、px換算rem 公式=想要的px值/基數 也就是說，當你設置 html {font-size:62.5%;}，你想給容器里的文字設置字號14px，換算成rem就是14px/10——1.4rem 這樣子 （如果自己想要測試的話，拿火狐Firebug測試，因為Chrome下字號低於12px失效哈，如果想設置小於12px的字號，Chrome也有解決方案，自己百度就好） - 應用於：
- 通常在移動端看新聞的時候，右上角都有個調節字體大小的，可以通過點擊調節新聞的字體大小，方便閱讀https://blog.csdn.net/u014607184/article/details/79516528
- 移動端適配：
- 只使用rem會出現在retina屏幕上1px線條顯示過粗的現象，因為雖然物理尺寸一致，但在普通屏幕下
1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的卻是4個物理像素。
4、flexible布局（自動通過flexible.js計算頁面html的font-size的大小，然后在頁面布局中使用rem作為單位，而非px）
注意：（手機淘寶推出的，為了解決淘寶H5在移動端的布局）https://www.cnblogs.com/lyzg/p/5058356.html
- 在使用flexible.js的過程中，如果當前頁面（app.vue/index.html）指定了meta[name="viewport"]，刪除meta標簽，然后根據js文件重新計算dpr；
- dpr = 物理像素/設備像素（750/375）
- 當設計稿為 750px 的情況下，dpr(設備像素比)=2，根元素字體大小為100px，除font-size外，公式=想要的px值/100 ；
- 而font-size推薦使用px寫死
-
工作中做完一個觸屏版的頁面后，我們會拿iPhone5s、iPhone6、iPhone6s等手機進行測試，他們都是Retina屏，我們當然希望在這些手機型號上看到的文本字號是相同的。也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機上看到更多文本（例如iPhone7、iPhone7Plus）。另外，現在絕大多數的字體文件都自帶一些點陣尺寸，通常是16px和24px，都是偶數，所以我們不希望出現13px和15px這樣的奇葩尺寸。
如此一來，就決定了在制作H5的頁面中，rem並不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小。//當然這只是針對於描述性的文本，比如說段落文本。但有的時候文本的字號也需要分場景的，比如在項目中有一個slogan，
//業務方希望這個slogan能根據不同的終端適配。針對這樣的場景，完全可以使用rem給slogan做計量單位
//移動端的字體選擇。對於只需要適配手機設備，使用px即可。對於需要適配各種移動設備，
//例如需要適配iPhone和iPad等分辨率差別比較挺大的設備，就要使用rem了，有時還需要配合媒體查詢一起使用。
//方法 定制一個font-dpr()這樣的Sass混合宏 @mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; } }
//開發中
@include font-dpr(16px);
-
- iPhone6 上有1px 的滾動條，最后處理方案是通過 viewport 中的 maximum-scale 的值加了0.1，由於設置了
user-scalable=no，maximum-scale 的值加0.1並不會有什么影響，但是卻神奇的解決了這個問題。 - 下面為js代碼，只需要將其復制到js文件，並將其命名為flexible.js
View Code(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { // console.warn('將根據已有的meta標簽來設置縮放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，對於2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他設備下，仍舊使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem(){ var width = docEl.getBoundingClientRect().width; // console.log(width) if (width / dpr > 768) { width = 768 * dpr; } var rem = width / 7.5; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {})); - 混合開發需要做到的兼容處理
1.如果dpr=1(如電腦端），則html的font-size為50px，此時 1rem = 50px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “1.0” ； 2.如果dpr=2(如iphone 5 和 6），則html的font-size為100px，此時 1rem = 100px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “0.5” 3.如果dpr=3(如iphone 6 sp），則html的font-size為150px，此時 1rem = 150px； viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “0.3333333333”
4、常見的適配布局組合：
- rem + 響應式布局（媒體查詢）
- em/rem彈性布局（vh/vw）https://blog.csdn.net/qq_24182885/article/details/81479457
- bootstrap布局
- flexible布局
5、參考資料：