整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
phone6及iphone6plus已經(jīng)出來(lái)一段時(shí)間了。很多移動(dòng)端網(wǎng)站，以前寫死body為320px的，現(xiàn)在估計(jì)也忙著做適配了。
大屏幕手機(jī)其實(shí)一直有，只是以前大家沒(méi)怎么重視，移動(dòng)端的H5頁(yè)面大部分都以320px為基準(zhǔn)寬度進(jìn)行布局，那些大屏屌絲android用戶也懶得去理，而現(xiàn)在iphone也搞起多屏幕，老板們重視程度就不一樣了。
回歸正題，兼容iphone各版本機(jī)型最佳的方式就是自適應(yīng)。
1、viewport簡(jiǎn)單粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接設(shè)置viewport為320px的1.3倍，將頁(yè)面放大1.3倍。
為什么是1.3？
目前大部分頁(yè)面都是以320px為基準(zhǔn)的布局，而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:也可以直接使用實(shí)際的device-width：如device-width:375px
在原有頁(yè)面的基礎(chǔ)上，再針對(duì)相應(yīng)的屏幕大小單獨(dú)寫樣式做適配。
3、REM布局
REM是CSS3新增的一種單位，并且移動(dòng)端的支持度很高，android2.x+，ios5+都支持。
REM是相對(duì)于dom結(jié)構(gòu)的根元素來(lái)設(shè)置大小，也就是html這個(gè)元素。相較于em單位，rem使用上更容易理解及運(yùn)用。
REM與PX的換算可以查看網(wǎng)址：https://offroadcode.com/prototypes/rem-calculator/
假設(shè)，html我們?cè)O(shè)置font-size:12px;也就是說(shuō)12px相對(duì)于1rem，那么18px也就是18/12=1.5rem。
那么我們以320px的設(shè)計(jì)布局為基準(zhǔn)，將html設(shè)置為font-size:100px，即100px=1rem。(設(shè)置100px是為了方便計(jì)算)那么可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應(yīng)式布局？
1、如果僅僅是適配ip6+設(shè)備，那么使用mediaquery就行。
偽代碼如下：
/*320px布局*/
html{font-size:100px;}
body{font-size:0.14rem/*實(shí)際相當(dāng)于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下，也就將頁(yè)面內(nèi)的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自適應(yīng)，那么可以通過(guò)JS來(lái)控制。
(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);
頁(yè)面初始化的時(shí)候計(jì)算font-size，然后再綁定resize事件。這種效果就和百分比布局一樣了。
那么用REM做單位與百分比做單位有什么優(yōu)勢(shì)？
主要優(yōu)勢(shì)在于能更好的控制元素大小。（一般百分比應(yīng)用在布局層，一般常見(jiàn)設(shè)置為50%，33.3%，25%之類的整數(shù)居多，難以運(yùn)用在復(fù)雜的頁(yè)面小部件內(nèi)）。
但是相比百分比布局，需要借助JS或mediaquery實(shí)現(xiàn)，略有一點(diǎn)瑕疵。
DEMO地址
4、圖片自適應(yīng)
剛說(shuō)完REM布局，那么用百分比布局也能實(shí)現(xiàn)一樣的效果，但是用百分比布局，必須要面臨一個(gè)問(wèn)題：圖片寬度100%，頁(yè)面加載時(shí)會(huì)存在高度塌陷的問(wèn)題。.
那么可以用padding-top設(shè)置百分比值來(lái)實(shí)現(xiàn)自適應(yīng)。
公式如下：
padding-top=(ImageHeight/ImageWidth)*100%
原理：padding-top值為百分比時(shí)，取值是是相對(duì)于寬度的。
相關(guān)代碼實(shí)現(xiàn)：
<divclass="cover">
<imgsrc="http://www.jungjaehyung.com/uploadfile/2024/0807/20240807031317792.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下，已經(jīng)開始支持img的srcset屬性了（目前移動(dòng)端也就ios8開始支持），也就是說(shuō)，可以對(duì)一張圖片設(shè)置2個(gè)URL，瀏覽器自動(dòng)加載對(duì)應(yīng)的圖片。
黃色表示僅支持舊的srcset規(guī)范，綠色表示支持全新的srcset規(guī)范，包括sizes屬性，w描述符。這里不展開，詳細(xì)了解可自行g(shù)oogle。
不過(guò)目前前端這邊圖片的實(shí)現(xiàn)基本都用lazyload的方式實(shí)現(xiàn)。srcset的圖片加載方式在實(shí)際項(xiàng)目中運(yùn)用還比較少。
6、背景圖高清化
mediaquery實(shí)現(xiàn)高清化
img標(biāo)簽的高清化，可以通過(guò)JS判斷devicePixelRatio的值來(lái)加載不同尺寸的圖片，但是對(duì)于背景圖，寫在CSS中的，用JS來(lái)判斷就略麻煩了，還好CSS通過(guò)mediaquery也能判斷dpr。
目前兼容性最好的背景圖高清化實(shí)現(xiàn)方式，使用mediaquery的-webkit-min-device-pixel-ratio做判斷：
/*普通顯示屏(設(shè)備像素比例小于等于1)使用1倍的圖*/
.css{
background-image:url(img_1x.png);
}
/*高清顯示屏(設(shè)備像素比例大于等于2)使用2倍圖*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){
.css{
background-image:url(img_2x.png);
}
}
/*高清顯示屏(設(shè)備像素比例大于等于3)使用3倍圖*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){
.css{
background-image:url(img_3x.png);
}
}
進(jìn)一步，可以通過(guò)工具生成相應(yīng)的3x，2x，1x的圖片及css，在使用時(shí)直接引用即可。誰(shuí)搞一個(gè)？
關(guān)于移動(dòng)設(shè)備的-webkit-min-device-pixel-ratio值，可以查看該網(wǎng)頁(yè)的整理：http://bjango.com/articles/min-device-pixel-ratio/
image-set實(shí)現(xiàn)高清化
image-set，它是Webkit的私有屬性，也是Css4的一個(gè)屬性，它是為了解決Retina屏幕下的圖像顯示而生。
使用方式也很簡(jiǎn)單。偽代碼如下：
.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屏幕]*/
);
}
目前移動(dòng)端的支持程度來(lái)看，ios7+，android4.4+下已經(jīng)支持了。如果僅僅是做ip6+的高清適配方案。image-set也是一種實(shí)現(xiàn)方案。
使用image-set與mediaquery實(shí)現(xiàn)有什么區(qū)別及好處？
這篇文章里面做了很詳細(xì)的闡述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大體的意思是：image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網(wǎng)速下，瀏覽器可以選擇加載低分辨率的圖片。（PS：好智能的樣子）
但是相比如mediaquery的實(shí)現(xiàn)，image-set僅支持單個(gè)圖片的高清化，不適合在csssprite下使用。并且兼容性也是一大硬傷。
但是一般來(lái)說(shuō)，用在LOGO區(qū)域，單個(gè)圖片圖標(biāo)的區(qū)域下，也是個(gè)不錯(cuò)的選擇。
7、圖片列表的自適應(yīng)
關(guān)于適配，也就是要讓布局更靈活，在電商網(wǎng)站里面，商品列表是一個(gè)非常常見(jiàn)的結(jié)構(gòu)。
一種比較智能的列表方式是：兩端對(duì)齊，間距自適應(yīng)。
那么可以使用FLEXBOX布局來(lái)實(shí)現(xiàn)兩端對(duì)齊的效果，也可以使用text-align:justify的方式實(shí)現(xiàn)。
先看個(gè)flex實(shí)現(xiàn)的例子，主要通過(guò)justify-content:space-between，來(lái)實(shí)現(xiàn)：
flexbox的布局方式，在PC端就不合適了，ie9以下都不支持，那么更友好的方式可以使用text-align:justify來(lái)實(shí)現(xiàn)，兼容各大主流瀏覽器，包括IE6。
但是這2種布局方式都有一定的局限性。就是列表個(gè)數(shù)必須湊整。目前還沒(méi)找到一種能夠兼容不限個(gè)數(shù)的實(shí)現(xiàn)方案，如果各位看官有更好的實(shí)現(xiàn)方式，也歡迎提出，一起交流。
移動(dòng)端ip6的適配方案有很多，沒(méi)有固定的套路及方法，請(qǐng)根據(jù)自身業(yè)務(wù)的特點(diǎn)，選擇其中的一些方法組合使用。
跨無(wú)憂（www.kuawuyou.com）來(lái)自“跨屏無(wú)憂”的想法，我們首個(gè)推出永久的、不依賴第三方的跨屏幕適配方案，希望以我們專業(yè)的力量幫助每個(gè)企業(yè)都能實(shí)現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的轉(zhuǎn)變，讓企業(yè)網(wǎng)站輕松無(wú)憂完成到移動(dòng)設(shè)備的跨屏幕適配，快速抓住移動(dòng)互聯(lián)網(wǎng)機(jī)遇。
學(xué)目標(biāo)：
1. 理解前端開發(fā)的基本概念和原理。
- 前端開發(fā)的定義和作用
- 前端開發(fā)的基本工具和環(huán)境
- 前端開發(fā)的職責(zé)和要求
2. 掌握HTML5標(biāo)記語(yǔ)言的基本語(yǔ)法、元素和屬性。
- HTML5的發(fā)展歷程和版本
- HTML5文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
- HTML5常用的文本標(biāo)記、圖像標(biāo)記、表格標(biāo)記等
- HTML5的表單元素和相關(guān)屬性
3. 掌握CSS3的基本語(yǔ)法、選擇器和常用樣式屬性。
- CSS3的發(fā)展歷程和版本
- CSS3的基本語(yǔ)法和選擇器
- CSS3的盒模型、布局和浮動(dòng)
- CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫
it學(xué)習(xí)
4. 理解JavaScript的基本語(yǔ)法、數(shù)據(jù)類型、條件語(yǔ)句和循環(huán)結(jié)構(gòu)。
- JavaScript的基本語(yǔ)法和變量定義
- JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
- JavaScript的條件語(yǔ)句和邏輯運(yùn)算
- JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。
- DOM的概念和基本原理
- 使用JavaScript獲取和操作HTML元素
- 使用JavaScript創(chuàng)建、修改和刪除HTML元素
- DOM事件的處理和綁定
6. 理解響應(yīng)式設(shè)計(jì)的概念和基本原理。
- 響應(yīng)式設(shè)計(jì)的定義和作用
- 使用媒體查詢實(shí)現(xiàn)頁(yè)面布局的適應(yīng)性
- 使用流式布局和彈性盒子布局實(shí)現(xiàn)頁(yè)面適配
- 使用響應(yīng)式圖片等技術(shù)提升頁(yè)面響應(yīng)性
軟件開發(fā)
大綱精細(xì)化教學(xué)設(shè)計(jì)：
第一部分：前端開發(fā)基礎(chǔ)
1. 前端開發(fā)概述
1.1 什么是前端開發(fā)
1.2 前端開發(fā)的歷史和發(fā)展趨勢(shì)
1.3 前端開發(fā)的基本工具和環(huán)境
2. HTML5基礎(chǔ)
2.1 HTML5的簡(jiǎn)介和發(fā)展歷程
2.2 HTML5的文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
2.3 HTML5常用的文本標(biāo)記、圖像標(biāo)記、鏈接標(biāo)記等
2.4 HTML5的表單元素和相關(guān)屬性
3. CSS3基礎(chǔ)
3.1 CSS3的簡(jiǎn)介和發(fā)展歷程
3.2 CSS3的基本語(yǔ)法和選擇器
3.3 CSS3的盒模型、布局和浮動(dòng)
3.4 CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫
4. JavaScript基礎(chǔ)
4.1 JavaScript的簡(jiǎn)介和發(fā)展歷程
4.2 JavaScript的基本語(yǔ)法和變量定義
4.3 JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
4.4 JavaScript的條件語(yǔ)句和邏輯運(yùn)算
4.5 JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
小程序開發(fā)
第二部分：網(wǎng)頁(yè)交互與動(dòng)態(tài)效果
1. DOM操作
1.1 DOM的概念和基本原理
1.2 使用JavaScript獲取和操作HTML元素
1.3 使用JavaScript創(chuàng)建、修改和刪除HTML元素
1.4 DOM事件的處理和綁定
2. 事件處理與表單驗(yàn)證
2.1 常見(jiàn)的DOM事件類型和觸發(fā)條件
2.2 使用JavaScript處理交互事件
2.3 表單驗(yàn)證的基本原理和實(shí)現(xiàn)方法
3. Ajax與數(shù)據(jù)交互
3.1 Ajax的簡(jiǎn)介和發(fā)展歷程
3.2 使用JavaScript發(fā)送異步請(qǐng)求
3.3 處理服務(wù)器返回的數(shù)據(jù)
第三部分：響應(yīng)式設(shè)計(jì)與跨平臺(tái)開發(fā)
1. 響應(yīng)式設(shè)計(jì)概述
1.1 響應(yīng)式設(shè)計(jì)的定義和作用
1.2 媒體查詢的基本語(yǔ)法和常用屬性
1.3 使用響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)網(wǎng)頁(yè)適配
2. 移動(dòng)端開發(fā)概述
2.1 移動(dòng)端開發(fā)的特點(diǎn)和挑戰(zhàn)
2.2 使用CSS3實(shí)現(xiàn)移動(dòng)端樣式效果
2.3 使用JavaScript處理移動(dòng)端交互
3. 跨平臺(tái)開發(fā)基礎(chǔ)
3.1 常見(jiàn)的跨平臺(tái)開發(fā)技術(shù)和框架
3.2 使用跨平臺(tái)開發(fā)工具搭建應(yīng)用
3.3 測(cè)試和發(fā)布跨平臺(tái)應(yīng)用
通過(guò)以上的教學(xué)目標(biāo)和大綱精細(xì)化教學(xué)設(shè)計(jì)，學(xué)習(xí)者將能夠全面掌握前端開發(fā)所需的HTML5、CSS3和JavaScript的基礎(chǔ)知識(shí)，并能夠應(yīng)用所學(xué)知識(shí)實(shí)現(xiàn)網(wǎng)頁(yè)交互和動(dòng)態(tài)效果，以及具備響應(yīng)式設(shè)計(jì)和跨平臺(tái)開發(fā)的能力。
輯導(dǎo)語(yǔ)：如何為一款產(chǎn)品制定合適的界面規(guī)則？隨著產(chǎn)品的迭代更新，作為設(shè)計(jì)師，則更需要在了解產(chǎn)品特性的情況下、設(shè)計(jì)出合理且有效的界面布局。本篇文章里，作者就對(duì)web產(chǎn)品設(shè)計(jì)適配選型做出介紹，并提出了他的看法。
現(xiàn)如今，幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)都要進(jìn)行響應(yīng)式和自適應(yīng)設(shè)計(jì)，才能讓產(chǎn)品能夠覆蓋到更多終端。接手一個(gè)產(chǎn)品設(shè)計(jì)的初期，制定界面適配規(guī)則時(shí)，你是否也有過(guò)如下疑問(wèn)：
在早期，硬件設(shè)備落后，網(wǎng)頁(yè)使用的是絕對(duì)靜態(tài)布局為主，絕對(duì)固定寬度的布局被稱為是靜態(tài)布局（Static Layout），也有叫固定布局（Fixed Layout）。
后隨時(shí)代變遷，技術(shù)發(fā)展。因?yàn)g覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個(gè)期間，實(shí)際已經(jīng)有了針對(duì)各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡(jiǎn)稱AWD）。
在當(dāng)時(shí)，大多指的就是寬度自適應(yīng)布局。
在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當(dāng)時(shí)，大家都還沒(méi)有響應(yīng)式布局的概念，但此時(shí)出現(xiàn)了一個(gè)新的詞——漸進(jìn)增強(qiáng)。漸進(jìn)增強(qiáng)出現(xiàn)后，另一個(gè)詞優(yōu)雅降級(jí)也隨之出現(xiàn)了。這里只是舉個(gè)典型的例子：Gmail和QQmail。這兩個(gè)都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。
QQmail就是CSS hack的完美體現(xiàn)。你用任何一個(gè)瀏覽器，幾乎可以看到同一個(gè)樣子的郵箱，為的是用戶體驗(yàn)統(tǒng)一。
Gmail則使用了漸進(jìn)增強(qiáng)，你的瀏覽器越新越強(qiáng)，你看到的效果就越好，為的是用戶體驗(yàn)增強(qiáng)。再后來(lái)，Google發(fā)布了Android，移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5標(biāo)準(zhǔn)發(fā)布。
互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)。手機(jī)雖然屏幕變小了，但是卻提供了更豐富的功能。用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗(yàn)了。
所以，谷歌式的漸進(jìn)增強(qiáng)被廣泛認(rèn)可。結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。
描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。
現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢？依然是因?yàn)闀r(shí)代發(fā)展與生活方式的變遷：
因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實(shí)現(xiàn)方式。
靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點(diǎn)對(duì)比如下。
窗口縮小后內(nèi)容被遮擋時(shí)，拖動(dòng)滾動(dòng)條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個(gè)樣。移動(dòng)設(shè)備上則顯示太小或不全。
用自適應(yīng)技術(shù)（Adaptive），我們可以開發(fā)和提供不同的布局，來(lái)為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場(chǎng)景提供最好的體驗(yàn)。
分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，相當(dāng)于多個(gè)靜態(tài)布局組成的一個(gè)系列合集。
每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，頁(yè)面通過(guò)百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小。
當(dāng)可視窗口改變時(shí)，不會(huì)出現(xiàn)橫向滾動(dòng)條，UI、圖片、文字會(huì)自動(dòng)縮放，元素內(nèi)容、布局、交互方式基本不變。
以百分比作為頁(yè)面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。
屬于自適應(yīng)的一個(gè)子集，也是通過(guò)百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小。不同于百分比自適應(yīng)的是，隨著窗口大小的改變，頁(yè)面的布局會(huì)發(fā)生小的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)相補(bǔ)。
如果從廣義上講，響應(yīng)式布局實(shí)際上就是更好、更機(jī)智、更靈活地去實(shí)現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點(diǎn)講響應(yīng)式重在于「響應(yīng)」它會(huì)隨著設(shè)備屬性（如寬高）的變化。
頁(yè)面的設(shè)計(jì)和開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、CSS media query的使用等。
狹義上講，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)指的是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。
1）R和A上的區(qū)別
當(dāng)響應(yīng)式設(shè)計(jì)在基于預(yù)定義斷點(diǎn)之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。
他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當(dāng)采用響應(yīng)式思維開發(fā)時(shí)，HTML代碼在各種情況下都會(huì)一樣（除非你用JS移除某些DOM節(jié)點(diǎn)），而在自適應(yīng)開發(fā)中我們可能會(huì)有不一樣的代碼結(jié)構(gòu)和體驗(yàn)。
R采用流體＋斷點(diǎn)，在斷點(diǎn)之間，頁(yè)面依然會(huì)隨窗口大小自動(dòng)縮放（通過(guò)fluid grid），直到遇到斷點(diǎn)改變界面樣式布局甚至內(nèi)容。R一般來(lái)說(shuō)需要在網(wǎng)頁(yè)設(shè)計(jì)初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。
A只在針對(duì)幾種分辨率（如320、480、760、960、1200、1600px）進(jìn)行優(yōu)化，在斷點(diǎn)之間的自動(dòng)過(guò)渡比較少。而A則采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。
兩種設(shè)計(jì)思維都是有效的，需衡量在項(xiàng)目中有多少組件、復(fù)雜性如何以及是否存在一種體驗(yàn)是適合所有用戶的。開發(fā)web應(yīng)用時(shí)經(jīng)常會(huì)用到響應(yīng)式設(shè)計(jì)，例如通過(guò)自適應(yīng)開發(fā)來(lái)構(gòu)建定制化體驗(yàn)。
兩種方法各有利弊，但是如果同時(shí)使用它們到底會(huì)得到什么呢？A+R模型結(jié)合了基于單個(gè)主要臨界點(diǎn)的自適應(yīng)和響應(yīng)式方法。
混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個(gè)布局中，頁(yè)面元素隨著窗口調(diào)整而自動(dòng)適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應(yīng)布局的融合。
自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。
很多時(shí)候，單一方式的布局響應(yīng)無(wú)法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡(jiǎn)單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會(huì)講到）保持統(tǒng)一邏輯。否則頁(yè)面實(shí)現(xiàn)太過(guò)復(fù)雜也會(huì)影響整體體驗(yàn)和頁(yè)面性能。
一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。
2）選型
如何考慮實(shí)踐過(guò)程中的判斷呢？
一是看應(yīng)用場(chǎng)景，二是看如何設(shè)計(jì)“響應(yīng)式”方案。簡(jiǎn)單、輕量的頁(yè)面直接用media query實(shí)現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。
但請(qǐng)注意響應(yīng)式不僅僅是響應(yīng)式布局。對(duì)于大型站簡(jiǎn)單用media query是遠(yuǎn)遠(yuǎn)不夠的。
于是在同一個(gè)controller層上，識(shí)別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源，這也算是響應(yīng)式。開發(fā)及維護(hù)成本明顯提高。
當(dāng)各個(gè)版本間的差異很大時(shí)，維護(hù)成本很可能會(huì)大到無(wú)法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層App化。
根據(jù)不同公司的技術(shù)特點(diǎn)，調(diào)整的成本也難講是否可行。對(duì)于大型站，分開做更清晰，同時(shí)用響應(yīng)式組件解決復(fù)用、功能同步的問(wèn)題。總之，根據(jù)場(chǎng)景響應(yīng)式可以從各種層面、各種粒度上做。這是現(xiàn)代web開發(fā)的特點(diǎn)。
建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過(guò)渡到平板端，不過(guò)渡到手機(jī)端）和開發(fā)一套響應(yīng)式手機(jī)端網(wǎng)站（過(guò)渡到平板端以下的尺寸，不過(guò)渡到平板端）。
響應(yīng)式布局有可能造成冗余的代碼較多，對(duì)研發(fā)的要求也更高，比如如何更好地讓圖片、適配、UI動(dòng)畫自適應(yīng)各種布局。
大站還是要考慮數(shù)據(jù)計(jì)算和承載的問(wèn)題，會(huì)對(duì)桌面和移動(dòng)端輸出不同數(shù)據(jù)，減輕壓力。
首先，我們需要了解幾種分辨率的差別。
PS：原生應(yīng)用可查詢橫縱兩個(gè)方向的像素密度，通常瀏覽器可查詢1個(gè)系統(tǒng)像素對(duì)應(yīng)多少物理像素。而設(shè)計(jì)角度通常需要參考的是所獲取的系統(tǒng)分辨率。
以一個(gè)SaaS類后臺(tái)產(chǎn)品為例。
對(duì)于基本流量來(lái)自Web端網(wǎng)頁(yè)的產(chǎn)品而言，需要了解當(dāng)下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來(lái)源百度統(tǒng)計(jì)，如圖所示：
如上所述，選擇適配方式時(shí)，設(shè)計(jì)目標(biāo)為：區(qū)分web與pad端可共享的設(shè)計(jì)布局大于手機(jī)端，且產(chǎn)品規(guī)劃上web端為主流量來(lái)源，pad端屬于短期兼顧。考慮技術(shù)維護(hù)成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來(lái)完成產(chǎn)品的跨端設(shè)計(jì)。
自適應(yīng)（A）方法能讓我們?cè)诓煌脑O(shè)備上有不同的體驗(yàn)、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點(diǎn)，根據(jù)全局統(tǒng)計(jì)信息定義，我們會(huì)得到一些相似處：
在使用響應(yīng)式（R）技術(shù)時(shí)，我們可以利用主要臨界點(diǎn)創(chuàng)建兩個(gè)互不相同的體驗(yàn)情景。每種體驗(yàn)里，我們都可以在可用空間內(nèi)定義二級(jí)臨界點(diǎn)去調(diào)整布局。
通過(guò)結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗(yàn)和功能，作出兩種不同的情景設(shè)計(jì)。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。
這種設(shè)計(jì)方法要求設(shè)計(jì)師真正了解他們想要提供的體驗(yàn)，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動(dòng)設(shè)備上運(yùn)行的大型APP。就像你看到的，你的產(chǎn)品將具有很強(qiáng)的靈活性，但同時(shí)也很復(fù)雜。
因?yàn)槟阋幚聿煌拇a庫(kù)和環(huán)境（非強(qiáng)制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動(dòng)網(wǎng)站上。如果你在移動(dòng)設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動(dòng)用戶的期望來(lái)檢驗(yàn)它們是如何改變的用戶體驗(yàn)的。
柵格系統(tǒng)可以幫助我們?cè)O(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。對(duì)于簡(jiǎn)化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項(xiàng)十分有效的輔助手段。
列（Column）用于對(duì)齊內(nèi)容。
其中的槽（Gutter）是指相鄰列之間的空間，把控頁(yè)面留白，有助于分隔內(nèi)容。
頁(yè)邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個(gè)屏幕尺寸的最小呼吸空間。
用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。
8、12、16和20是響應(yīng)式布局中最常見(jiàn)的幾種列結(jié)構(gòu)。而這取決于我們對(duì)產(chǎn)品的設(shè)計(jì)要求。
12列結(jié)構(gòu)是相對(duì)靈活的。它可以進(jìn)一步細(xì)分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計(jì)系統(tǒng)采用來(lái)24列的形式，如Ant-D。
是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點(diǎn)。
在這個(gè)范圍內(nèi)，布局會(huì)根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無(wú)法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。
列跟槽的寬度是以網(wǎng)格作為基本單位來(lái)做增減，所以應(yīng)該先定義好柵格的原子單位?！熬W(wǎng)紅款”8點(diǎn)網(wǎng)格指的是設(shè)計(jì)頁(yè)面時(shí)，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。
產(chǎn)品中各類元素應(yīng)該遵循這個(gè)倍數(shù)原則（圖標(biāo)、組件大小等），不同的設(shè)計(jì)系統(tǒng)根據(jù)自身需求，設(shè)定這個(gè)規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長(zhǎng)或收縮以適應(yīng)可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對(duì)齊。頁(yè)眉、頁(yè)腳、出血都是一些常見(jiàn)的例子。
如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個(gè)固定柵格就會(huì)轉(zhuǎn)變成一個(gè)適應(yīng)屏幕可用空間的流動(dòng)?xùn)鸥?，以充分適應(yīng)內(nèi)容。
設(shè)計(jì)需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點(diǎn)，進(jìn)行設(shè)計(jì)方案評(píng)估?？山柚氖侄斡袆h格、網(wǎng)格規(guī)則等。設(shè)計(jì)斷點(diǎn)規(guī)則時(shí)，需關(guān)注設(shè)備的常見(jiàn)系統(tǒng)分辨率。
移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問(wèn)題。只要有足夠的編程量，這些差別是可以通過(guò)響應(yīng)式設(shè)計(jì)來(lái)解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。
但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)或者使用A+R的模型，在尋求合適的過(guò)程中，關(guān)注技術(shù)的革新。
A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個(gè)問(wèn)題而生，是同一種思想的延伸。
作者：神樂(lè)、沙拉；公眾號(hào)：酷家樂(lè)用戶體驗(yàn)設(shè)計(jì)
本文由 @酷家樂(lè)用戶體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
