大屏幕手機其實一直有,只是以前大家沒怎麼重視,移動端的H5頁面大部分都以320px爲基準寬度進行佈局,那些大屏屌絲android用戶也懶得去理,而現在iphone也搞起多屏幕,老闆們重視程度就不一樣了。
迴歸正題,兼容iphone各版本機型最佳的方式就是自適應。
1、viewport 簡單粗暴的方式:
< meta name = "viewport" content = "width=320,maximum-scale=1.3,user-scalable=no" > |
直接設置viewport爲320px的1.3倍,將頁面放大1.3倍。
爲什麼是1.3?
目前大部分頁面都是以320px爲基準的佈局,而iphone6的寬度比是375/320 = 1.171875,iphone6+則是 414/320 = 1.29375
那麼以1.29倍也就約等於1.3了。
2、ip6+ 的CSS media query
@media
(min-device-width : 375px )
and (max-device-width : 667px )
and (-webkit-min-device-pixel-ratio : 2 ){ /*iphone
6*/ } @media
(min-device-width : 414px )
and (max-device-width : 736px )
and (-webkit-min-device-pixel-ratio : 3 ){ /*iphone
6 plus*/ } |
PS: 也可以直接使用實際的device-width:如device-width
: 375px
在原有頁面的基礎上,再針對相應的屏幕大小單獨寫樣式做適配。
3、REM佈局
REM是CSS3新增的一種單位,並且移動端的支持度很高,android2.x+,ios5+ 都支持。
REM是相對於dom結構的根元素來設置大小,也就是html這個元素。相較於em單位,rem使用上更容易理解及運用。
REM與PX的換算可以查看網址:https://offroadcode.com/prototypes/rem-calculator/
假設,html我們設置font-size:12px; 也就是說12px相對於1rem,那麼18px也就是 18/12 = 1.5rem。
那麼我們以320px的設計佈局爲基準,將html設置爲font-size:100px,即100px = 1rem。(設置100px是爲了方便計算)那麼可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應式佈局?
1、如果僅僅是適配ip6+設備,那麼使用media query就行。
僞代碼如下:
/*320px佈局*/ html{ font-size : 100px ;} body{ font-size : 0.14 rem /*實際相當於14px*/ } /*
iphone 6 */ @media
(min-device-width : 375px )
and (max-device-width : 667px )
and (-webkit-min-device-pixel-ratio : 2 ){ html{ font-size : 117.1875px ;} } /*
iphone6 plus */ @media
(min-device-width : 414px )
and (max-device-width : 736px )
and (-webkit-min-device-pixel-ratio : 3 ){ html{ font-size : 129.375px ;} } |
這樣,在ip6下,也就將頁面內的元素放大了1.17倍,ip6+下也就是放大了1.29倍。
2、如果是完全自適應,那麼可以通過JS來控制。
( function (doc,
win) { var docEl
= doc.documentElement, resizeEvt
= 'orientationchange' in window
? 'orientationchange' : 'resize' , recalc
= function ()
{ var clientWidth
= docEl.clientWidth; if (!clientWidth) return ; docEl.style.fontSize
= 100 * (clientWidth / 320) + 'px' ; }; //
Abort if browser does not support addEventListener if (!doc.addEventListener) return ; win.addEventListener(resizeEvt,
recalc, false ); doc.addEventListener( 'DOMContentLoaded' ,
recalc, false ); })(document,
window); |
頁面初始化的時候計算font-size,然後再綁定resize事件。這種效果就和百分比佈局一樣了。
那麼用REM做單位與百分比做單位有什麼優勢?
主要優勢在於能更好的控制元素大小。(一般百分比應用在佈局層,一般常見設置爲50%,33.3%,25%之類的整數居多,難以運用在複雜的頁面小部件內)。
但是相比百分比佈局,需要藉助JS或media query實現,略有一點瑕疵。
DEMO地址
4、圖片自適應
剛說完REM佈局,那麼用百分比佈局也能實現一樣的效果,但是用百分比佈局,必須要面臨一個問題:圖片寬度100%,頁面加載時會存在高度塌陷的問題。.
如圖:頁面加載時圖片高度默認不存在。
那麼可以用padding-top設置百分比值來實現自適應。
公式如下:
padding-top = (Image Height
/ Image Width) * 100%
原理:padding-top值爲百分比時,取值是是相對於寬度的。
相關代碼實現:
< div class = "cover" > < img src = "http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt = "" /> </ div > |
.cover{ position : relative ; padding-top : 100% ; height : 0 ; overflow : hidden ;} .cover
img{ position : absolute ; top : 0 ; width : 100% ;} |
DEMO地址,縮放瀏覽器窗口看看。
5、圖片高清化
大家都知道,iphone6 plus 是3倍高清圖了,它的devicePixelRatio = 3。 關於DPR的介紹可以查看這篇文章《設備像素比devicePixelRatio簡單介紹》
在ios8下,已經開始支持img的srcset
屬性了(目前移動端也就ios8開始支持),也就是說,可以對一張圖片設置2個URL,瀏覽器自動加載對應的圖片。
黃色表示僅支持舊的srcset規範,綠色表示支持全新的srcset規範,包括sizes屬性,w描述符。 這裏不展開,詳細瞭解可自行google。
如下DEMO,請切換devicePixelRatio值進行查看:
不過目前前端這邊圖片的實現基本都用lazyload的方式實現。srcset的圖片加載方式在實際項目中運用還比較少。
6、背景圖高清化
media query 實現高清化
img標籤的高清化,可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖片,但是對於背景圖,寫在CSS中的,用JS來判斷就略麻煩了,還好CSS通過media query也能判斷dpr。
目前兼容性最好的背景圖高清化實現方式,使用media query的-webkit-min-device-pixel-ratio
做判斷:
/*
普通顯示屏(設備像素比例小於等於1)使用1倍的圖 */ .css{ background-image : url (img_ 1 x.png); } /*
高清顯示屏(設備像素比例大於等於2)使用2倍圖 */ @media
only screen and
(-webkit-min-device-pixel-ratio: 2 ){ .css{ background-image : url (img_ 2 x.png); } } /*
高清顯示屏(設備像素比例大於等於3)使用3倍圖 */ @media
only screen and
(-webkit-min-device-pixel-ratio: 3 ){ .css{ background-image : url (img_ 3 x.png); } } |
進一步,可以通過工具生成相應的3x,2x,1x的圖片及css,在使用時直接引用即可。誰搞一個?
關於移動設備的-webkit-min-device-pixel-ratio
值,可以查看該網頁的整理:http://bjango.com/articles/min-device-pixel-ratio/
image-set 實現高清化
image-set,它是Webkit的私有屬性,也是Css4的一個屬性,它是爲了解決Retina屏幕下的圖像顯示而生。
使用方式也很簡單。僞代碼如下:
.css
{ background-image : url ( 1 x.png); /*不支持image-set的情況下顯示*/ background :
-webkit-image-set( url ( 1 x.png) 1 x, /*
支持image-set的瀏覽器的[普通屏幕]下 */ url ( 2 x.png) 2 x, /*
支持image-set的瀏覽器的[2倍Retina屏幕] */ url ( 3 x.png) 3 x /*
支持image-set的瀏覽器的[3倍Retina屏幕] */ ); } |
目前移動端的支持程度來看,ios7+,android 4.4+ 下已經支持了。如果僅僅是做ip6+的高清適配方案。image-set
也是一種實現方案。
使用image-set 與 media query 實現有什麼區別及好處?
這篇文章裏面做了很詳細的闡述,大家可以看看:http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大體的意思是:image-set不需要告訴瀏覽器使用什麼圖像,而是直接提供了圖像讓瀏覽器選擇。這就意味着,如果在低網速下,瀏覽器可以選擇加載低分辨率的圖片。(PS:好智能的樣子)
但是相比如media query的實現,image-set僅支持單個圖片的高清化,不適合在css sprite下使用。 並且兼容性也是一大硬傷。
但是一般來說,用在LOGO區域,單個圖片圖標的區域下,也是個不錯的選擇。
7、圖片列表的自適應
關於適配,也就是要讓佈局更靈活,在電商網站裏面,商品列表是一個非常常見的結構。
一種比較智能的列表方式是:兩端對齊,間距自適應。
那麼可以使用FLEXBOX佈局來實現兩端對齊的效果,也可以使用text-align:justify
的方式實現。
先看個flex實現的例子,主要通過justify-content:space-between
,來實現:
flexbox的佈局方式,在PC端就不合適了,ie9以下都不支持,那麼更友好的方式可以使用text-align:justify
來實現,兼容各大主流瀏覽器,包括IE6。
詳情請移步我以前寫的博文:《inline-block + justify實現列表兩端對齊》
小DEMO:
但是這2種佈局方式都有一定的侷限性。就是列表個數必須湊整。目前還沒找到一種能夠兼容不限個數的實現方案,如果各位看官有更好的實現方式,也歡迎提出,一起交流。
總結
移動端ip6的適配方案有很多,沒有固定的套路及方法,請根據自身業務的特點,選擇其中的一些方法組合使用。