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