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.14rem /*實際相當於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實現,略有一點瑕疵。
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%;}
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_1x.png); } /* 高清顯示屏(設備像素比例大於等於2)使用2倍圖 */ @media only screen and (-webkit-min-device-pixel-ratio:2){ .css{ background-image: url(img_2x.png); } } /* 高清顯示屏(設備像素比例大於等於3)使用3倍圖 */ @media only screen and (-webkit-min-device-pixel-ratio:3){ .css{ background-image: url(img_3x.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(1x.png); /*不支持image-set的情況下顯示*/ background: -webkit-image-set( url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */ url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */ url(3x.png) 3x/* 支持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區域,單個圖片圖標的區域下,也是個不錯的選擇。
關於圖片列表適配,也就是要讓布局更靈活,在電商網站里面,商品列表是一個非常常見的結構。一種比較智能的列表方式是:兩端對齊,間距自適應。
那么可以使用FLEXBOX布局來實現兩端對齊的效果,也可以使用 text-align:justify
的方式實現。