當(dāng)iPhone出來(lái)后，2007年，其網(wǎng)絡(luò)瀏覽器的已故偉大的史蒂夫·喬布斯演示了不那么微妙的印象，蘋果是不是太忐忑關(guān)于它的用戶捏縮放和刷卡滾動(dòng)作為瀏覽的一部分經(jīng)驗(yàn)。 響應(yīng)濟(jì)南網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)的目的是通過(guò)巧妙地運(yùn)用靈活的網(wǎng)格，流體布局，當(dāng)然，媒體查詢來(lái)解決這個(gè)問(wèn)題。

然而，響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)已被證明是在有些意想不到的后果的法律為例，用的倒行逆施非預(yù)期效應(yīng)是斷點(diǎn)偏執(zhí)之一。 但即使沒(méi)有不正當(dāng)影響的媒體查詢施加在選擇這些斷點(diǎn)，它更內(nèi)省，這些可能不是我們要找的機(jī)器人后，灑在你。

在這篇文章中，我們將著眼于超出屏幕大小斷點(diǎn)，并探討不同的可能性和實(shí)際的方法來(lái)使用它們來(lái)在網(wǎng)絡(luò)上建立真正的自適應(yīng)體驗(yàn)。

動(dòng)態(tài)閾值

一個(gè)閾值 是該點(diǎn)或在哪一級(jí)的東西開(kāi)始或變更。 閾值可以發(fā)現(xiàn)，覺(jué)得幾乎無(wú)處不在物理世界：停在紅綠燈前，選擇脫脂奶代替三奶比全脂，二糖，轉(zhuǎn)而選擇粗魯?shù)牟璞T在迪斯尼世界，等出

閾值定義我們，因?yàn)樗麄兌x的動(dòng)作和行為決定結(jié)果 。 如果能夠確定正確的門限設(shè)置您的課程更好的結(jié)果，尤其是當(dāng)你確切地知道哪些需要每個(gè)閾值內(nèi)完成。 這是類似于做正確的事情在正確的時(shí)間。

我們的遠(yuǎn)見(jiàn)概念化 – 并啟用 – 新門檻那里有沒(méi)有將開(kāi)辟的行動(dòng)相提供一個(gè)能與成果的新境界。 的自由和靈活性，我們從這個(gè)收購(gòu)將不僅有助于滿足我們與生俱來(lái)的欲望增量awesomization，這將推動(dòng)我們創(chuàng)造更好的網(wǎng)站，提供更好的用戶體驗(yàn)。

今天的斷點(diǎn)

在今天的網(wǎng)頁(yè)設(shè)計(jì)，我們注視的最閾值與幾乎完全屏幕大小。 在過(guò)去幾年中的主要挑戰(zhàn)是設(shè)計(jì)用于移動(dòng)設(shè)備，而隨著屏幕尺寸是顯而易見(jiàn)的焦點(diǎn)，我們的主要目的是要適應(yīng)我們的網(wǎng)頁(yè)布局，以配合環(huán)境目標(biāo)的具體顯示特性。

在響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)，定義這些斷點(diǎn)的主要方法是通過(guò)設(shè)置媒體查詢。

 @media screen and (min-width: 240px) and (max-width: 320px){ body { background: red; } }

上面的標(biāo)記清楚地識(shí)別兩個(gè)閾值（240像素和320像素）構(gòu)成的范圍內(nèi)，其中一個(gè)動(dòng)作將被觸發(fā)（在這種情況下，改變背景色為紅色）。 這在概念上非常簡(jiǎn)單。

美杜莎查詢

“當(dāng)我們?cè)黾尤说哪芰?lái)完成自己的任務(wù)，我們應(yīng)該小心，不要無(wú)謂地削減他們能做什么?！?/p>

– 杰里米·基思

媒體查詢，事實(shí)證明，是非常剛性的。 通常情況下，你不得不使用斷點(diǎn)的方式是不完全直觀，也不內(nèi)嵌核心的設(shè)計(jì)訴求。 換句話說(shuō)，你必須適應(yīng)你的設(shè)計(jì)愿望的能力。 所以，你可以有你自己的閾值，一個(gè)充滿活力的想象力，但更可能媒體的質(zhì)疑不會(huì)讓你申請(qǐng)他們，你設(shè)想的方式。

媒體查詢的捍衛(wèi)者應(yīng)該明白，效率是什么使任何有效的努力值得稱贊。 花幾分鐘甚至幾小時(shí)扭捏那些討厭的指令，然后不得不重新調(diào)整他們要進(jìn)行調(diào)整每一次這簡(jiǎn)直是一個(gè)遞歸的噩夢(mèng)。 這有什么不妥基于移動(dòng)設(shè)備（如智能手機(jī)，平板電腦等）廣泛的分類設(shè)置斷點(diǎn)？！

在文章“ 設(shè)計(jì)的斷點(diǎn) ，“斯蒂芬干草建議定義基于設(shè)備類斷點(diǎn)。 由幾個(gè)斷言的帶動(dòng)下，我踏上了一個(gè)小型研究項(xiàng)目，后來(lái)我轉(zhuǎn)換成博客文章 就證明了這對(duì)還是錯(cuò)。 而在這我是否最近進(jìn)行的一項(xiàng)民意調(diào)查媒體查詢應(yīng)針對(duì)設(shè)備類 ，約54％的受訪者表示肯定。 但沒(méi)有直觀的方式來(lái)做到這一點(diǎn)的媒體查詢，即使你想。

在我的愚見(jiàn)，從網(wǎng)頁(yè)設(shè)計(jì)師的角度來(lái)看，媒體查詢的功能集是不完整的。 它是如此，因?yàn)樵O(shè)計(jì)師有想象力和食欲有更多的斷點(diǎn)比媒體查詢目前可以提供（也許永遠(yuǎn)會(huì)在未來(lái)的）。

新斷點(diǎn)

正如前面提到的一點(diǎn)，我們找到并設(shè)置新的門檻的能力將決定我們的概念化，我們可以設(shè)置一個(gè)觸發(fā)新的行動(dòng)能力。 通過(guò)這樣做，我們可以引入更多的調(diào)整到一個(gè)固有的靜態(tài)和不靈活的環(huán)境。

在語(yǔ)境網(wǎng)頁(yè)設(shè)計(jì)斷點(diǎn)

明天的網(wǎng)站有超過(guò)響應(yīng) – 他們必須是上下文了。 的靈活性和流動(dòng)性這些概念必須超越的屏幕尺寸。 一個(gè)尺寸適合所有網(wǎng)站的時(shí)代將要走到盡頭，并通過(guò)網(wǎng)站也適應(yīng)用戶的需求和期望所取代。

要啟用此功能，我們必須概念化多個(gè)閾值，但首先我們需要找出哪些參數(shù)來(lái)追蹤。 在尼克·芬克的精辟演講“ 的語(yǔ)境網(wǎng)絡(luò) ，“他強(qiáng)調(diào)了在網(wǎng)頁(yè)設(shè)計(jì)方面的四個(gè)方面： 用戶，任務(wù)，環(huán)境和技術(shù) 。 當(dāng)然，所有四個(gè)為外推法的寶庫(kù)，但我們應(yīng)該真正關(guān)注？

我們可以問(wèn)數(shù)以百計(jì)的有關(guān)用戶，他們的任務(wù)，他們的環(huán)境和什么樣的技術(shù)，他們可以訪問(wèn)的問(wèn)題，甚至上千。 然而，我們必須對(duì)我們目前的和公開(kāi)的能力立足這些問(wèn)題，以獲得對(duì)上述四種參數(shù)的數(shù)據(jù)。 一些可能的問(wèn)題可能是：

• 什么是用戶的物理能力？
  如果用戶是視障或聽(tīng)障，我們將需要增加更多的輔助功能，將提高他們的經(jīng)驗(yàn)。
• 哪里是用戶的大致位置？
  知道哪里是用戶為我們提供了他們的文化，經(jīng)濟(jì)狀況，人口，等一個(gè)好主意
• 現(xiàn)在是什么時(shí)候在用戶的位置？
  人們通常習(xí)慣的動(dòng)物，而且更有可能會(huì)在某個(gè)時(shí)間執(zhí)行某些操作。
• 什么是用戶的設(shè)備？
  一個(gè)電話是不是平板電腦，以及平板電腦不是PC。 不同的設(shè)備具有不同的能力和將被用于不同的任務(wù)。
• 什么是用戶有親和力？
  哪些用戶喜歡（和不喜歡的）將在幫助我們優(yōu)化和交付內(nèi)容發(fā)揮強(qiáng)有力的作用。

有很多方法可以與當(dāng)今的瀏覽器中可用的技術(shù)回答上述問(wèn)題。 如果沒(méi)有，那么我們真的需要更加努力地工作，以建立他們的，特別是考慮到一個(gè)問(wèn)題，同樣重要的輔助功??能。

那么，我們?nèi)绾卧O(shè)計(jì)一個(gè)網(wǎng)站是上下文？ 如何將我們想象中的斷點(diǎn)上下文意義？ 這里有一個(gè)場(chǎng)景。

讓我們假設(shè)它是在早上6:00，和你的鬧鐘響起。 你架著你的廚房弄點(diǎn)早餐，準(zhǔn)備和標(biāo)題出去打工之前。 你看中了雞蛋，但你打開(kāi)冰箱，也沒(méi)有雞蛋。 所以，你看中別的東西，但你想訂購(gòu)一些雜貨，讓他們隨時(shí)可以拿起自己的方式下班回來(lái)。 你火了一個(gè)非常大的百貨連鎖店的網(wǎng)站從您的Internet連接的冰箱來(lái)完成這件事。

你留下深刻的印象，只是因?yàn)檫@個(gè)網(wǎng)站是響應(yīng)？ 為得到最好的交易在電子給你一個(gè)優(yōu)先在這一點(diǎn)？ 難道你真的想提醒的是，有些你“最近瀏覽”在幾個(gè)項(xiàng)目中上述網(wǎng)站均林肯日志和一個(gè)蜘蛛俠牙刷架？ 我的意思是，這是上午06時(shí)18分，和你從冰箱瀏覽。 是否需要一個(gè)火箭科學(xué)家弄清楚，也許雜貨項(xiàng)目應(yīng)該是一個(gè)值得一類優(yōu)先次序？

我敢肯定有很多其他情況就是這樣，而且很容易的人誰(shuí)不熟悉Web技術(shù)得到沮喪，怎么網(wǎng)站似乎仍然達(dá)不到他們的期望。 但對(duì)于我們這些誰(shuí)做的，我們應(yīng)該仍然可以找借口，或者我們應(yīng)該嘗試在信封推進(jìn)一步？

新方法

“媒體查詢?cè)试S作者以測(cè)試和用戶代理或顯示設(shè)備，獨(dú)立于所呈現(xiàn)的文檔的查詢值或功能?！?/p>

– 編者草案，W3C（2014年6月3日）

我最近細(xì)讀了“ 媒體查詢4級(jí) “規(guī)范草案獲得那里的東西是領(lǐng)導(dǎo)的感覺(jué)。 我必須說(shuō)，我不是很高興能與方向，那里只是似乎并沒(méi)有太大的創(chuàng)新在這里。

從文檔的抽象，我們得到一個(gè)什么樣的媒體查詢是作為一種方法的明確定義。 不過(guò)，我只是不明白為什么有媒體功能沒(méi)有變化，以反映目前 – 以及可能的未來(lái) – 現(xiàn)實(shí)。

有什么問(wèn)題有一個(gè)像設(shè)備類媒體功能phone或tablet ？ 他們就像明顯的選擇，并且，根據(jù)調(diào)查前面提到，網(wǎng)頁(yè)設(shè)計(jì)師想要的功能集。 有人會(huì)說(shuō)，這些可能不會(huì)在未來(lái)的“東西”，但幾乎沒(méi)有可信的，因?yàn)槠?，電視，電腦，冰箱，手表和眼鏡仍然是“事”，人們發(fā)現(xiàn)有用的今天。 而當(dāng)我們真正看到了一項(xiàng)決議，問(wèn)題件查詢 ？

在我看來(lái)，媒體查詢（如網(wǎng)頁(yè)設(shè)計(jì)在多設(shè)備世界的一種工具），根本無(wú)法保持任何形式與當(dāng)代網(wǎng)頁(yè)設(shè)計(jì)師的創(chuàng)作軌跡平衡，他們是網(wǎng)頁(yè)設(shè)計(jì)未來(lái)一個(gè)道義上是站不住腳的標(biāo)準(zhǔn)。 也許我們應(yīng)該看看的各種途徑; 我想提出幾個(gè)。 他們沒(méi)有那么復(fù)雜，而我們就需要有一個(gè)帽子，外套和領(lǐng)帶。

帽子戲法

我們大概都熟悉CSS類選擇器在這一點(diǎn)上。 他們是最之一， 在網(wǎng)頁(yè)設(shè)計(jì)中常用的選擇器 。

 .muttley .do_something {…}

我不明白的是，為什么我們不使用這些類以上媒體查詢來(lái)構(gòu)建移動(dòng)友好的網(wǎng)站？

這在我看來(lái)，設(shè)計(jì)網(wǎng)站為許多不同的情況會(huì)這么容易和更快，如果瀏覽器使用的HTML屬性標(biāo)記（HAT）。 基本上，這將涉及到瀏覽器將特定參數(shù)的class的屬性<html>標(biāo)簽（在加載頁(yè)面的過(guò)程），這將使網(wǎng)頁(yè)設(shè)計(jì)師可以利用這些類在他們的CSS標(biāo)記。

其中一些參數(shù)可以包括以下內(nèi)容：

• 設(shè)備組
  固定，移動(dòng)，家庭，穿，汽車等。
• 設(shè)備類
  PC，手機(jī)，平板電腦，電視，冰箱，汽車，手表等。
• 輸入設(shè)備
  粗，細(xì)
• 帶寬
  高，中，低
• 方向
  肖像，風(fēng)景
• 視口的寬度和高度
  在設(shè)備無(wú)關(guān)的像素，以40的最接近倍數(shù)，用一個(gè)字母前綴符合
• 本地日期和時(shí)間
  在ddmmyyyy的日期，并提供24小時(shí)的表示時(shí)間格式
• 時(shí)區(qū)
  UTC偏移量
• 一般地理位置
  大陸和國(guó)家代碼

根據(jù)預(yù)期的需要可以添加更多的參數(shù)。 此外，所有參數(shù)將被抽象了DOM window對(duì)象，使他們很容易通過(guò)JavaScript訪問(wèn)。

因此，假設(shè)有人在使用的Nexus 5手機(jī)在一個(gè)4G LTE移動(dòng)網(wǎng)絡(luò)。 該瀏覽器將添加相關(guān)的標(biāo)簽頁(yè)，留給我們這樣的：

 <html class="mobile phone coarse high portrait v360w v640h d07052014 t0900 utc_a af_ng">

如果他們改變了手機(jī)的方向?yàn)闄M向，瀏覽器將有狀態(tài)更新標(biāo)簽，給我們這樣的：

 <html class="mobile phone coarse high landscape v640w v360h d07052014 t0900 utc_a af_ng">

如果發(fā)生這種情況，網(wǎng)頁(yè)設(shè)計(jì)師會(huì)有很多的選擇，以快速適應(yīng)跨多個(gè)邏輯斷點(diǎn)他們的網(wǎng)頁(yè)在思想字面上的速度。 讓我們考慮一個(gè)工作的例子。

我最近測(cè)試的定價(jià)表 是不是不像看到了很多的SaaS網(wǎng)站的這些天表。 該表是三列，并使用內(nèi)置ul標(biāo)簽與浮動(dòng)li標(biāo)簽。

定價(jià)表下面是一些常見(jiàn)問(wèn)題的內(nèi)容，也有一個(gè)多列布局。

很顯然，這些多列元素就不會(huì)顯得那么好上的所有的移動(dòng)設(shè)備，因?yàn)樗麄儠?huì)在桌面上。 所以，在響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的精神，我們就必須使其適應(yīng)更小的屏幕尺寸。 我們會(huì)做到這一點(diǎn)的方法是通過(guò)展示這兩種可視化組件在其完整的多列榮耀只有當(dāng)網(wǎng)頁(yè)正在查看的橫向片劑。

這背后的邏輯是，我們希望在這方位的平板電腦有足夠的屏幕空間為整個(gè)表顯示為目的。 如果這些條件不具備，那么我們將崩潰的列是線性的和垂直的。

基本的CSS我們的價(jià)格表是這樣的：

 ul { margin: 0; padding: 0; list-style: none; } ul li { float: left; width: 33%; }

因此，利用帽子，我們將使用下面的標(biāo)記實(shí)現(xiàn)這些功能：

 .mobile ul li { float: none; width: 100%; } .mobile.tablet.landscape ul li { float: left; width: 33%;}

就是這樣！ 只是禁用所有移動(dòng)設(shè)備的浮動(dòng)布局元素，然后重新啟用它們?cè)跈M向片。 簡(jiǎn)單的愿望，簡(jiǎn)單的解決方案。 你想嘗試做同樣的事情與媒體查詢？ 打招呼的StackOverflow博士為我！

顯然，采用這種方法的好處有效率是一大好處 。 你會(huì)花更少的時(shí)間建立網(wǎng)站，因?yàn)槟悴粫?huì)浪費(fèi)時(shí)間可笑的金額各具特色媒體查詢，更何況所有的移動(dòng)設(shè)備隨之而來(lái)的測(cè)試。 其次，保持你的標(biāo)記會(huì)更容易些，因?yàn)橐磺卸紝⑹莍nline和就不會(huì)有不必要的重復(fù)。 第三，你將有機(jī)會(huì)去探索更多的用例，因?yàn)閷⑹亲鳛殚撝蹈虾踹壿嫈帱c(diǎn)多個(gè)參數(shù)。

許多顏色的外套

每個(gè)人似乎都被分析被迷住了。 網(wǎng)站分析程序，如谷歌Analytics和MixPanel，都試圖給出一個(gè)很好的圖片誰(shuí)訪問(wèn)了你的網(wǎng)站，他們停留了多久，他們來(lái)自什么網(wǎng)站，他們使用什么設(shè)備，等這個(gè)數(shù)據(jù)不會(huì)告訴什么你的是什么內(nèi)容的訪問(wèn)者有親和力。

你可以，當(dāng)然，使用cookie來(lái)跟蹤訪問(wèn)者到你的網(wǎng)站，但隨后你只能夠確定自己喜歡上你的網(wǎng)站，每天或每周或每月。 你將無(wú)法準(zhǔn)確地確定他們所關(guān)心的具體內(nèi)容，也可能你能夠做任何事情，他們離開(kāi)之前。

跟蹤內(nèi)容的親和力和適應(yīng)的內(nèi)容說(shuō)的親和力可以真正幫助我們構(gòu)建真正適應(yīng)人類欲望的網(wǎng)站。 要真正獲得這些數(shù)據(jù)，雖然數(shù)據(jù)收集機(jī)制需要超越任何一個(gè)網(wǎng)站。 也就是說(shuō)，所有的網(wǎng)站都需要以合作和透明的方式來(lái)建立這種親和形象。

COAT代表“ 累積性的，開(kāi)放的親和標(biāo)記 ，”這只是一個(gè)認(rèn)識(shí)事物的共享方法的訪客有親和力，然后構(gòu)建親和的形象。 下面是它如何工作的：

• 經(jīng)常有人訪問(wèn)了一堆網(wǎng)站。 有些是新聞網(wǎng)站，有些是體育網(wǎng)站和一些博客。 每個(gè)網(wǎng)頁(yè)將有一個(gè)COAT meta標(biāo)簽。
• 瀏覽器（通過(guò)COAT子引擎）會(huì)讀這個(gè)元標(biāo)記，并在保留，保護(hù)和只讀localStorage的變量（可以隨意命名）增量存儲(chǔ)在一個(gè)以逗號(hào)分隔的格式它的價(jià)值。 所以，對(duì)于網(wǎng)站，我們的用戶訪問(wèn)量，該值可能是news:info:1,sports:soccer:2,blog:tech:3 。
• 如果人訪問(wèn)另一個(gè)體育相關(guān)的網(wǎng)站，該網(wǎng)站會(huì)從localStorage中讀?。ê透拢┑挠H和標(biāo)簽。 它看到的人是服從足球，所以提供了更多的重視在主頁(yè)上的足球內(nèi)容。

有了這種認(rèn)識(shí)，我們可以調(diào)整一個(gè)網(wǎng)站的主頁(yè)，以更好地滿足用戶在一個(gè)高度專業(yè)化的方式不同需求。

COAT數(shù)據(jù)將包括在以下格式的逗號(hào)分隔的字符串：

 {category_1}:{sub_category_1}:{popularity_1},…,{category_n}:{sub_category_n}:{popularity_n}

這里， category是一種類型的內(nèi)容的寬泛分類; sub_category能夠進(jìn)一步分類; 和popularity是訪問(wèn)頻率的度量。 所以，如果我們的用戶訪問(wèn)了科技博客30次一個(gè)月，參觀了體育網(wǎng)站的足球節(jié)，每天5次，那么我們最終會(huì)和這個(gè)標(biāo)簽：

 blog:tech:30,sports:soccer:150

這僅僅是一個(gè)例子; 該分類系統(tǒng)將通過(guò)更大的網(wǎng)絡(luò)社區(qū)定義和維護(hù)。 一些保障措施是到位了。 例如，如果一個(gè)網(wǎng)站沒(méi)有定義一個(gè)COAT meta標(biāo)簽的話，那就不能夠讀取一個(gè)無(wú)論是。 此外，如果用戶在瀏覽的私模，然后COAT將被禁用。

COAT不會(huì)跟蹤任何個(gè)人信息。 這樣做的目的不是要找出誰(shuí)一個(gè)人是和他們可能會(huì)，但要獲得他們喜歡什么樣的內(nèi)容（以及他們喜歡它）的廣闊畫面，讓網(wǎng)站能夠個(gè)性化他們的瀏覽體驗(yàn)。

配合

讓我們面對(duì)這個(gè)事實(shí)：JavaScript是真棒。 這不是很平易近人的大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師，但它的功能僅僅是巨大的，而且它主宰網(wǎng)站做偉大的事情，將來(lái)，即使它在今天的網(wǎng)站功能的貢獻(xiàn)是完全沒(méi)問(wèn)題的。

HTML和CSS是網(wǎng)站建設(shè)的一個(gè)偉大的二人，并曾因此相當(dāng)長(zhǎng)一段時(shí)間了。 然而，僅HTML似乎已經(jīng)允許保持與JavaScript的關(guān)系。 當(dāng)然，CSS是“用于描述文檔的外觀和格式樣式表語(yǔ)言?！钡湍壳扒闆r來(lái)看通過(guò)網(wǎng)絡(luò)功能的設(shè)備主宰的世界，很多決定一個(gè)網(wǎng)站的外觀和感覺(jué)的因素已經(jīng)超越CSS的境界 。

其結(jié)果是，CSS需要被允許的“朋友”的JavaScript，并要求其在執(zhí)行特定任務(wù)的幫助。 真的應(yīng)該有一種方法可以直接用內(nèi)聯(lián)CSS規(guī)則鏈接的Javascript功能。 一個(gè)辦法是通過(guò)超然內(nèi)聯(lián)表達(dá)式（TIE）。 TIE將提供鏈接的CSS規(guī)則與JavaScript表達(dá)式，開(kāi)辟更令人驚訝的機(jī)會(huì)，對(duì)網(wǎng)站功能的機(jī)制。

讓我們來(lái)看一個(gè)簡(jiǎn)單的例子。 假設(shè)我們已經(jīng)在我們的主頁(yè)的側(cè)邊欄褒獎(jiǎng)組件：

我們想把這個(gè)相同的組件到另一個(gè)頁(yè)面的主要內(nèi)容區(qū)域，某個(gè)地方，我們有更多的寬度與合作：

這就是所謂的模塊化設(shè)計(jì)，并在概念上這是一個(gè)非常簡(jiǎn)單的想法。 然而，我們就會(huì)有一個(gè)相當(dāng)困難的時(shí)間在CSS中實(shí)施這一（ 伊恩風(fēng)暴泰勒發(fā)現(xiàn) ），因?yàn)闆](méi)有一個(gè)簡(jiǎn)單的方法來(lái)CSS樣式應(yīng)用到基于其容器的大小的見(jiàn)證組件。

這個(gè)場(chǎng)景是什么引發(fā)了人們的叫囂元素的查詢，壓倒一切的是需要一種方式來(lái)定義適應(yīng)其包裝容器的大小可重用的模塊。 如果本地的CSS實(shí)現(xiàn)某種功能的TIE，那么我們也許能夠?qū)懺贑SS中一個(gè)簡(jiǎn)單的表達(dá)式來(lái)實(shí)現(xiàn)這一目標(biāo)：

 .testimonial { … } .testimonial[expr="if @parent:width less than 200px"] { … } .testimonial[expr="if @parent:width between 200px and 500px"] { … }

對(duì)于第一個(gè)規(guī)則集，我們會(huì)風(fēng)格.testimonial像往常一樣。 對(duì)于第二個(gè)規(guī)則集，該表達(dá)式可能意味著，當(dāng)父元素的寬度.testimonial是小于或等于200個(gè)像素，則應(yīng)用相應(yīng)的聲明，以該DOM元素（即父元素）。 這同樣適用于第三個(gè)規(guī)則集，從而宣告時(shí)應(yīng)用的父元素具有201像素到500像素的寬度。

基本上，CSS只會(huì)做什么??提供指導(dǎo)，而JavaScript的會(huì)做繁重的CSS是不太適合。 不是寫的CSS規(guī)則集樣式，然后跳轉(zhuǎn)到JavaScript來(lái)激活它們，我們將簡(jiǎn)單地通過(guò)在CSS中的表達(dá)兩者都做。 因?yàn)槲覀冋谕粋€(gè)DOM元素上，它是有道理的，要有一些簡(jiǎn)單而直觀的方式到時(shí)尚風(fēng)格，并直接從CSS中激活它（即DOM元素）。

任何這樣的TIE實(shí)現(xiàn)應(yīng)該足夠強(qiáng)大，讓網(wǎng)頁(yè)設(shè)計(jì)師在他們的創(chuàng)造力幾乎速度來(lái)實(shí)現(xiàn)功能。 換句話說(shuō)，如果他們能夠想象的那樣，設(shè)計(jì)師應(yīng)該能實(shí)現(xiàn)它 – 或接近它的東西 – 幾乎瞬間。

全部放在一起

讓我們來(lái)考慮一個(gè)場(chǎng)景，展示了如何建立一個(gè)網(wǎng)站，當(dāng)所有三個(gè)能夠融合在一起。

當(dāng)你讀到這封信的時(shí)候，世界杯將是，與來(lái)自世界各地的球迷將聚集在巴西體驗(yàn)杯Mundial酒店的驚險(xiǎn)刺激。 讓我們假設(shè)你是那些球迷之一，是在圣保羅，還出現(xiàn)了智能手機(jī)和谷歌的玻璃與您聯(lián)系。

一個(gè)流行的在線體育的目的地，恰好被覆蓋的情況下，通常會(huì)毯其網(wǎng)站與世界杯的功能在其他體育賽事在世界其他地區(qū)正在進(jìn)行的費(fèi)用。 該網(wǎng)站將采用三種方法前面，以提供一個(gè)非常特殊的用戶體驗(yàn)解釋。

建立各種內(nèi)容組件后，該網(wǎng)站的開(kāi)發(fā)人員應(yīng)該能夠做幾件事情沒(méi)有太多的壓力：

• 優(yōu)化網(wǎng)站專為谷歌玻璃，提供了更簡(jiǎn)單，界面更輕薄更容易導(dǎo)航。 此外，調(diào)整色彩對(duì)比，一天的時(shí)間（即切換到文本的光在深色背景在夜間），用HAT的設(shè)備類的參數(shù)。
• 提供在不同的城市在巴西當(dāng)?shù)氐木包c(diǎn)更多的內(nèi)容（例如運(yùn)動(dòng)吧，其它觀賞中心等）只有在接入設(shè)備是一個(gè)智能手機(jī)或平板電腦，并恰好是在巴西（使用HAT的位置參數(shù)）。
• 領(lǐng)導(dǎo)與賽前分析，球隊(duì)和球員配置文件，和商品如果用戶訪問(wèn)六小時(shí)即將到來(lái)的比賽中的網(wǎng)站（使用與領(lǐng)帶的組合帽子的時(shí)間參數(shù)）。
• 領(lǐng)導(dǎo)與比賽的亮點(diǎn)和賽后的分析，如果用戶訪問(wèn)12小時(shí)內(nèi)網(wǎng)站比賽結(jié)束后。 對(duì)于比賽的亮點(diǎn)上使用相同的代碼庫(kù)（使用HAT設(shè)備級(jí)參數(shù)）智能手機(jī)和平板電腦提供不同的布局設(shè)計(jì)。
• 鉛在更加突出的位置，比足球高爾夫功能，如果我們確定（通過(guò)COAT）用戶喜歡比后者前者更多。 但仍然顯示比賽的亮點(diǎn)在側(cè)邊欄較窄像素寬度（使用CSS中的TIE風(fēng)格特點(diǎn)以模塊化的方式）。
• 默認(rèn)為內(nèi)容的常規(guī)格式，如果我們不能確定用戶是否喜歡足球或其他運(yùn)動(dòng)。

正如你所看到的，高度個(gè)性化和精心加權(quán)用戶體驗(yàn)的排列和機(jī)會(huì)是豐富的，容易實(shí)現(xiàn)的，如果所有三種方法進(jìn)行審議。 我們不一定要全部使用它們，但它很高興知道他們?cè)谀抢?，如果我們想?/p>

該P(yáng)olyfill路

“你不能總是得到你想要的。 但是如果你嘗試有時(shí)候，你也許會(huì)發(fā)現(xiàn)，你得到你所需要的?！?/p>

– 滾石樂(lè)隊(duì)

哪來(lái)的網(wǎng)頁(yè)設(shè)計(jì)界是沒(méi)有polyfills？ 如預(yù)期即使是最好的善意技術(shù)并不總是有效的，有時(shí)它有差距的功能。 “只要肅殺，polyfill”將是手術(shù)的口頭禪在這些情況下，與過(guò)去幾年確實(shí)是一個(gè)名副其實(shí)的polyfill-palooza 。

所有本文中到目前為止概述的功能僅僅是思想和在CSS或媒體查詢?nèi)魏渭磳⒌絹?lái)的規(guī)范草案未指定用途的，所以你不能使用它們，現(xiàn)在，即使你想。 然而，這并不意味著我們不能做一些事情在其間。

Restive.JS

我說(shuō)過(guò)，我是用一個(gè)插件來(lái)建立一個(gè)網(wǎng)站。 那么，這將是Restive.JS ，一個(gè)jQuery插件，我開(kāi)發(fā)了大約一年前，擁抱并實(shí)現(xiàn)HAT原則。 使用的內(nèi)置選項(xiàng)breakpoints ， classes和命名一個(gè)特殊的功能turbo_classes ，Restive.JS填入您<html>或<body>與價(jià)值觀，使您可以輕松通過(guò)內(nèi)聯(lián)CSS更適應(yīng)網(wǎng)頁(yè)的布局標(biāo)記類屬性自然的設(shè)計(jì)靈感。

一旦你的基本思想，用它來(lái)建立新的響應(yīng)和自適應(yīng)網(wǎng)站是很容易的，因?yàn)槭菍⑺龅墓δ?，現(xiàn)有的網(wǎng)站。 我最近寫的教程“ 如何使任何網(wǎng)站響應(yīng) ，“你可以仔細(xì)閱讀在您的休閑。

你還可以了解更多通過(guò)Restive.JS’文件 ，并從GitHub的自述 。

寬容的一個(gè)注記

由于創(chuàng)意和專業(yè)技術(shù)人員，我們需要開(kāi)放給其他人的意見(jiàn)。 常人群邁向僅僅是因?yàn)閜unditocratic共識(shí)的位置，沒(méi)有停下來(lái)質(zhì)疑其背后的根本理由。

拿設(shè)備檢測(cè)。 有人說(shuō)這是一種不好的做法。 我的問(wèn)題是為什么呢？ 是不是因?yàn)樗徽J(rèn)為是不可靠的？ 我們可以把它可靠。 有沒(méi)有擔(dān)心它是不是高性能？ 然后，我們可以緩存數(shù)據(jù)。 解決大問(wèn)題應(yīng)該是一個(gè)包容性的努力，并采用排除法排除方法可能會(huì)反噬我們，如果有人能夠改善該方法。

創(chuàng)造力是一個(gè)貪得無(wú)厭的黑客，只要想象力不斷鞭策勤勞，那么最好的工具和方法，最終將讓位于更好的。 保持清晰，并緊緊地抓住手頭的任務(wù) – 和它的成功完成 – 不應(yīng)該妨礙我們成為強(qiáng)大與我們的工具集。 正如偉大的亞伯拉罕馬斯洛說(shuō)：“如果你只有一把錘子，一切看起來(lái)都像釘子?！?/p>

在關(guān)閉（但向前進(jìn)）

更多的東西并不一定是好事。 但是，當(dāng)涉及到斷點(diǎn)，“越多越好”確實(shí)不順。 作為人類，我們需要根據(jù)特定的閾值之間的特定觸發(fā)器動(dòng)作。 更多定義這些閾值可以開(kāi)辟機(jī)會(huì)，創(chuàng)造了適應(yīng)超出屏幕大小等等很多方面的網(wǎng)站，并探索將變成是有益的。

然而，正如我們開(kāi)辟新領(lǐng)域與新的斷點(diǎn)，我們應(yīng)該以一種方式，既方便快捷的為網(wǎng)頁(yè)設(shè)計(jì)師這樣做; 我們的方法的魯棒性不應(yīng)該使我們變得靈活。 同程網(wǎng)標(biāo)準(zhǔn)工作，我們很可能將不得不polyfill我們到應(yīng)許之地。 但是這不應(yīng)該從構(gòu)建每一個(gè)設(shè)備上，并在眾多的用戶場(chǎng)景，工作真棒網(wǎng)站阻止我們。