移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移動端web現狀：
移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器，Opera瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器及雜牌瀏覽器。移動端常見的瀏覽器都是基于webkit內核開發的，國內機操作系統也是基于Android開發的，因此在移動開發中只兼容主流瀏覽器，即處理webkit內核瀏覽器即可。
手機屏幕現狀：移動設備的屏幕尺寸繁多，常見Android設備分辨率有：480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等；iPhone設備常見分辨率有：640x960、 640x1136、 750x1334、 1242x2208等；實際開發中大多使用px為尺寸單位，因此我們不關注分辨率。
viewport視口：
視口（viewport）：指瀏覽器顯示頁面內容的屏幕區域，視口可分：布局視口、視覺視口、理想視口。
layout viewport布局視口：移動設備的瀏覽器默認設置一個布局視口，用于解決早期pc端頁面在移動端顯示問題。iOS、Android視口一般設置為980px，所以pc網頁一般都可以在移動設備顯示，只是元素看起來比較小，一般可以通過手動設置縮放視覺視口來顯示網頁。
visual viewport視覺視口：指用戶正在看到的網頁的區域。通過設置視覺視口來顯示網站頁面呈現在屏幕的區域，不會影響布局視口的變化。
ideal viewport理想視口：為了網站在移動設備上有理想的瀏覽和閱讀寬度而設定。需要手動添加meta視口標簽告知瀏覽器，它是喬布斯發明的，開啟它需要meta視口標簽，主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，布局的視口就多寬。視口屬性：
二倍圖：
物理像素（分辨率）：指屏幕顯示的最小顆粒，是物理真實存在的，是設備制造商出廠時就已經設置好了。實際開發時1px不一定等于一個物理像素（電腦端1px是等于物理像素的）。
物理像素比：指1px能顯示的物理像素點的個數，或稱屏幕像素比。
Retina（視網膜屏幕）:把更多的物理像素點壓縮到一塊屏幕里，從而達到更高的分辨率，分辨率高則越細膩。
二倍圖原理：由于圖片色彩比較豐富，一張原大小的圖放到移動設備后，會放大2倍，這樣圖片就會變的模糊，因此我們在制作圖片時把圖片制作成需求圖的2倍大小，再通過css代碼把尺寸設置為需求的大小，這樣就會解決圖片在移動設備因放大而變模糊的問題。隨著科技的提升，現在也存在3、4等倍數的圖，實際開發看公司需求。
移動端開發主流方案：
移動端開發主流方案有兩種可選：
1、單獨制作移動端頁面（主流），當輸入網址后自動判斷設備，跳轉到對應的網站。
2、響應式頁面兼容移動端，同時兼容PC和移動設備，通過判斷屏幕尺寸來改變樣式。制作起來非常麻煩，需要調整兼容性問題。
reset.css和normalize.css初始化文件：
reset和normalize都是用來初始化樣式在不同瀏覽器顯示不同的文件；兩個區別是reset會重置所有默認樣式，包括各瀏覽器顯示一致的樣式，而normalize則只會初始化各瀏覽器顯示不一致的樣式；因此移動端開發CSS初始化推薦：Normalize.css,其保留了有價值的默認值，修復瀏覽器bug，模塊化且擁有詳細解說文檔，支持npm下載，其官網：http://necolas.github.io/normalize.css
盒模型推薦：box-sizing：border-box，移動設備多支持h5c3因此使用c3中的盒模型可以避免大量計算問題。
/*移動端部分特殊樣式處理*/-webkit-tap-highlight-color: transparent;/*點擊高亮我們需要清除清除 設置為transparent 完成透明*/-webkit-appearance: none;/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/img,a {-webkit-touch-callout: none;}/*禁用長按頁面時的彈出菜單*/布局技術選型：
單獨制作移動頁面：流式布局、flex彈性布局、less+rem+媒體查詢布局、混合布局。
響應式頁面開發：媒體查詢、bootstrap
流式布局（百分比布局）：把盒子的寬度設置成百分比，根據屏幕的寬度自動伸縮，不受固定像素的限制，內容向兩邊填充，是移動端布局常見的布局方式，也稱非固定像素布局。實際中這種方式也不可能無限制的伸縮，因此一般要給父盒子max-width和min-width對其進行限制。
<style>section {width: 100%;height: 600px;max-width: 1000px;min-width: 320px;margin: 0 auto;background-color: rgb(143, 228, 126);}section div {width: 45%;height: 200px;}section div:first-child {float: left;margin-left: 5%;background-color: lightyellow;}section div:last-child {float: right;margin-right: 5%;background-color: lightblue;}</style><body><section><div></div><div></div></section></body>flex伸縮布局：flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局 ，伸縮性在響應式布局中有很大作用，但是flex布局存在極大兼容性問題，因此flex布局在pc端并不常見，移動端支持良好。開啟伸縮布局：給父級元素添加：display:flex;自己元素使用：flex:3;這個里的3表示占3份。
當父盒子設置為flex布局后（容器），子元素（項目）的float、clear、vertical-align屬性失效。
主軸：默認是flex容器水平方向從左到右；
側軸：默認與主軸垂直方向從上到下。父元素相關屬性：
flex子項常見屬性：
rem適配布局：rem是一個相對單位，類似于em，em指相對父系元素字體大小，而rem指相對于html元素字體大小。如：根元素設置字體大小為12px，非根元素設置字體大小為2rem,實際非跟元素的字體大小為24px，rem布局目前是比較流行的布局方式，非常重要。rem只是一個相對單位，可以設置給其他元素。
媒體查詢（media query）：使用@media查詢可以針對不同的媒體類型定義不同的樣式，從而輕松的解決屏幕大小適配問題。
媒體查詢引入資源：針對不同的屏幕尺寸引入不同的css樣式表，以層疊性實現不同樣式：
/* <link rel="stylesheet" href="stylemin.css" media="mediatype and|not|only (media feature)"> */<link rel="stylesheet" href="stylemin.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="stylemax.css" media="screen and (min-width:750px)">rem適配方案技術：
①less + 媒體查詢 + rem：通過媒體查詢根據不同屏幕的尺寸設置不同的font-size，頁面中元素尺寸選擇rem值，元素rem值 = 設計稿尺寸(px) / font-size , 新font-size=原設計稿中font-size x 新屏幕尺寸 / 原設計稿尺寸。，如下代碼：
//可以適配的屏幕尺寸：@arr:320px,540px,750px,920px,1200px; //設計稿的寬度：@psdWidth; //設計稿中font-size：@baseSize; //獲取@arr的長度@arrLength:length(@arr); //.functionName(參數) when (條件){code},less中函數可以使用when加條件，當條件滿足時會執行函數，否則不再執行函數，如： .setFontSize(@index) when (@index <= @arrLength){@media （min-widht:extract(@arr,@index)）{html{font-size:@baseSize / @psdWidth * extract(@arr,@index);};};.setFontSize(@index + 1);//函數自己調用自己實現遍歷效果，每次調用時參數+1來提滿足判斷條件 };//調用： .setFontSize(1);//調用時傳入參數1，從1開始遍歷②flexible.js + rem(推薦)：flexible.js是手機淘寶團隊推出的高效簡潔移動端適配庫，可以避免寫媒體查詢這一步，我們只需確定font-size即可（它的原理是把屏幕分為10等份，font-size的值=設計稿的值 / 屏幕所分的份數）。此時頁面元素的rem值為：頁面元素的px值 / font-size ，flexible.js會自動計算，其GitHub地址：https://github.com/amfe/lib-flexible，將其下載后把里面的文件通過js標簽引入：
<script src="js/flexible.js"></script>cssrem：一款自動將px單位轉換為rem單位的VScode插件。因為此插件中默認是參照16px轉換的，因此需要自己手動配置參數（VScode設置----搜索框搜cssrem:root font size-----配置對應的參數）
響應式布局：隨著屏幕尺寸的變化，布局發生相應的變化，不用單獨寫頁面。
響應式開發原理：通過媒體查詢針對不同的屏幕寬度改變父級容器大小，再改變里面子元素的排列方式和大小，從而達到適配不同設備的目的。
Bootstrap：響應式項目開發中，bootstrap是一款當下很好用的前端框架。使用bootstrap的HTML骨架如下：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告知以IE的edge瀏覽器加載網頁--><meta name="viewport" content="width=device-width, initial-scale=1"><!--開啟視口--><title>Bootstrap</title><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 引入Bootstrap庫 --> <!-- 條件注釋，第一個是解決html5新標簽兼容性的，第二個是解決css媒體查詢問題的 --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 引入jQuery --><script src="js/bootstrap.min.js"></script><!-- 引入了bootstrap.js文件--></body></html>bootstrap使用：此框架里面內置了很多類樣式，使用時直接給標簽加對應的類名即可。常用類名總結：
注意：bootstrap是一個非常豐富的前端框架，想要了解更多，請閱讀官方文檔：https://www.bootcss.com,下面將介紹移動端web開發中常用bootstrap部分：
.container容器默認有15px的左右內間距，而.row 有margin-left,margin-right值為-15px做拉伸，所以看到的是緊密的。
bootstrap柵格系統：把頁面內容分成12等份，由行和列的組合的布局頁面,網格狀布局，在一個響應式容器中定義行和列。由類名row定義柵格系統的行，由col-x-n定義柵格系統的列。col-x-n中n表示所占柵格12份中的幾份，x參數及含義如下：
柵格嵌套：每個柵格中是可以嵌套其它柵格的，就像div一樣，可以相互嵌套。
柵格偏移：col-(lg/md/sm/xs)-offset-n,給某個柵格添加此類可以使這個柵格向后偏移n份。
柵格排序：col-(lg/md/sm/xs)-push/pull-n,將某個柵格push推后幾份或將某個柵格pull拉前幾份。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no，maximum-scale=1.0,minimum-scale=1.0"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.container {margin: 0 auto;background-color: rgb(245, 122, 50);}.row div[class^=col] {border: 1px solid limegreen;height: 133px;}.inset div[class^=col] {height: auto;background-color: rgb(88, 236, 219);}.offset div[class^=col] {height: auto;background-color: rgb(230, 59, 193);}.arr div[class^=col] {height: auto;background-color: rgb(230, 59, 193);}</style></head><body><div class="container"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--柵格嵌套開始：--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row inset"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套a</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套b</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套c</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套d</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套e</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套w</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div><!-- 柵格偏移col-x-offset-n： --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row offset"><div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">柵格偏移</div><div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">柵格偏移</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div><!-- 柵格排序push推、pull拉 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row arr"><div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">柵格排序-左邊</div><div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">柵格排序-右邊</div></div></div></div></div></body></html>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： idea 自动生产序列吗,IDEA自动生
- 下一篇： 10恢复出厂设置_Mac系统如何恢复出厂