移动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系统如何恢复出厂