、 利用meta標簽

Meta標簽主要用來描述一個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利于搜索引擎。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解釋：Viewport指用戶網頁的可視區域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

以上標簽只支持一種尺寸，正確的做法是用js動態生成下面標簽，前提是要先獲取屏幕尺寸。

<script type="text/javascript">

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復雜的頁面實現很困難。

3、 使用CSS3單位rem

在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設寬度為W，一個div在寬度為640px的設計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會在頭部加上這個JS代碼：

<script type="text/javascript">

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、 媒體查詢

媒體查詢正是為解決網頁適應手機屏幕。媒體查詢的功能就是為不同的“媒體”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應頁面需要比較好的編程基礎和技術覺悟，一般的小白，不建議大家為了做自適應網頁專門學習HTML5、CSS3和JS，畢竟這并非一朝一夕就能學會的。如果技術小白想做自適應網頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎，全程拖拽，一樣能做出讓人驚艷的自適應網站。現在還有免費建站活動，無論外行內行，大家可以注冊體驗一下。

零基礎免費做HTML5自適應網站：http://www.iisp.com/design/free-site.php?s=yuqiuping

phone6及iphone6plus已經出來一段時間了。很多移動端網站，以前寫死body為320px的，現在估計也忙著做適配了。

大屏幕手機其實一直有，只是以前大家沒怎么重視，移動端的H5頁面大部分都以320px為基準寬度進行布局，那些大屏屌絲android用戶也懶得去理，而現在iphone也搞起多屏幕，老板們重視程度就不一樣了。

回歸正題，兼容iphone各版本機型最佳的方式就是自適應。

1、viewport簡單粗暴的方式：

<metaname="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+的CSSmediaquery

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){

/*iphone6*/

}

@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){

/*iphone6plus*/

}

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+設備，那么使用mediaquery就行。

偽代碼如下：

/*320px布局*/

html{font-size:100px;}

body{font-size:0.14rem/*實際相當于14px*/}

/*iphone6*/

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){

html{font-size:117.1875px;}

}

/*iphone6plus*/

@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){

vardocEl=doc.documentElement,

resizeEvt='orientationchange'inwindow?'orientationchange':'resize',

recalc=function(){

varclientWidth=docEl.clientWidth;

if(!clientWidth)return;

docEl.style.fontSize=100*(clientWidth/320)+'px';

};

//AbortifbrowserdoesnotsupportaddEventListener

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或mediaquery實現，略有一點瑕疵。

DEMO地址

4、圖片自適應

剛說完REM布局，那么用百分比布局也能實現一樣的效果，但是用百分比布局，必須要面臨一個問題：圖片寬度100%，頁面加載時會存在高度塌陷的問題。.

那么可以用padding-top設置百分比值來實現自適應。

公式如下：

padding-top=(ImageHeight/ImageWidth)*100%

原理：padding-top值為百分比時，取值是是相對于寬度的。

相關代碼實現：

<divclass="cover">

<imgsrc="http://www.jungjaehyung.com/uploadfile/2024/0807/20240807025558540.jpg"alt=""/>

</div>

.cover{position:relative;padding-top:100%;height:0;overflow:hidden;}

.coverimg{position:absolute;top:0;width:100%;}

DEMO地址，縮放瀏覽器窗口看看。

5、圖片高清化

大家都知道，iphone6plus是3倍高清圖了，它的devicePixelRatio=3。

在ios8下，已經開始支持img的srcset屬性了（目前移動端也就ios8開始支持），也就是說，可以對一張圖片設置2個URL，瀏覽器自動加載對應的圖片。

黃色表示僅支持舊的srcset規范，綠色表示支持全新的srcset規范，包括sizes屬性，w描述符。這里不展開，詳細了解可自行google。

不過目前前端這邊圖片的實現基本都用lazyload的方式實現。srcset的圖片加載方式在實際項目中運用還比較少。

6、背景圖高清化

mediaquery實現高清化

img標簽的高清化，可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖片，但是對于背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過mediaquery也能判斷dpr。

目前兼容性最好的背景圖高清化實現方式，使用mediaquery的-webkit-min-device-pixel-ratio做判斷：

/*普通顯示屏(設備像素比例小于等于1)使用1倍的圖*/

.css{

background-image:url(img_1x.png);

}

/*高清顯示屏(設備像素比例大于等于2)使用2倍圖*/

@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){

.css{

background-image:url(img_2x.png);

}

}

/*高清顯示屏(設備像素比例大于等于3)使用3倍圖*/

@mediaonlyscreenand(-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+，android4.4+下已經支持了。如果僅僅是做ip6+的高清適配方案。image-set也是一種實現方案。

使用image-set與mediaquery實現有什么區別及好處？

這篇文章里面做了很詳細的闡述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大體的意思是：image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網速下，瀏覽器可以選擇加載低分辨率的圖片。（PS：好智能的樣子）

但是相比如mediaquery的實現，image-set僅支持單個圖片的高清化，不適合在csssprite下使用。并且兼容性也是一大硬傷。

但是一般來說，用在LOGO區域，單個圖片圖標的區域下，也是個不錯的選擇。

7、圖片列表的自適應

關于適配，也就是要讓布局更靈活，在電商網站里面，商品列表是一個非常常見的結構。

一種比較智能的列表方式是：兩端對齊，間距自適應。

那么可以使用FLEXBOX布局來實現兩端對齊的效果，也可以使用text-align:justify的方式實現。

先看個flex實現的例子，主要通過justify-content:space-between，來實現：

flexbox的布局方式，在PC端就不合適了，ie9以下都不支持，那么更友好的方式可以使用text-align:justify來實現，兼容各大主流瀏覽器，包括IE6。

但是這2種布局方式都有一定的局限性。就是列表個數必須湊整。目前還沒找到一種能夠兼容不限個數的實現方案，如果各位看官有更好的實現方式，也歡迎提出，一起交流。

移動端ip6的適配方案有很多，沒有固定的套路及方法，請根據自身業務的特點，選擇其中的一些方法組合使用。

跨無憂（www.kuawuyou.com）來自“跨屏無憂”的想法，我們首個推出永久的、不依賴第三方的跨屏幕適配方案，希望以我們專業的力量幫助每個企業都能實現在移動互聯網的轉變，讓企業網站輕松無憂完成到移動設備的跨屏幕適配，快速抓住移動互聯網機遇。