當iPhone出來后，2007年，其網絡瀏覽器的已故偉大的史蒂夫·喬布斯演示了不那么微妙的印象，蘋果是不是太忐忑關于它的用戶捏縮放和刷卡滾動作為瀏覽的一部分經驗。 響應濟南網站建設網頁設計的目的是通過巧妙地運用靈活的網格，流體布局，當然，媒體查詢來解決這個問題。
然而，響應網頁設計已被證明是在有些意想不到的后果的法律為例，用的倒行逆施非預期效應是斷點偏執之一。 但即使沒有不正當影響的媒體查詢施加在選擇這些斷點，它更內省，這些可能不是我們要找的機器人后，灑在你。
在這篇文章中，我們將著眼于超出屏幕大小斷點，并探討不同的可能性和實際的方法來使用它們來在網絡上建立真正的自適應體驗。
動態閾值
一個閾值 是該點或在哪一級的東西開始或變更。 閾值可以發現，覺得幾乎無處不在物理世界：停在紅綠燈前，選擇脫脂奶代替三奶比全脂，二糖，轉而選擇粗魯的茶杯騎在迪斯尼世界，等出
閾值定義我們，因為他們定義的動作和行為決定結果 。 如果能夠確定正確的門限設置您的課程更好的結果，尤其是當你確切地知道哪些需要每個閾值內完成。 這是類似于做正確的事情在正確的時間。
我們的遠見概念化 – 并啟用 – 新門檻那里有沒有將開辟的行動相提供一個能與成果的新境界。 的自由和靈活性，我們從這個收購將不僅有助于滿足我們與生俱來的欲望增量awesomization，這將推動我們創造更好的網站，提供更好的用戶體驗。
今天的斷點
在今天的網頁設計，我們注視的最閾值與幾乎完全屏幕大小。 在過去幾年中的主要挑戰是設計用于移動設備，而隨著屏幕尺寸是顯而易見的焦點，我們的主要目的是要適應我們的網頁布局，以配合環境目標的具體顯示特性。
在響應網頁設計，定義這些斷點的主要方法是通過設置媒體查詢。
@media screen and (min-width: 240px) and (max-width: 320px){ body { background: red; } }
上面的標記清楚地識別兩個閾值（240像素和320像素）構成的范圍內，其中一個動作將被觸發（在這種情況下，改變背景色為紅色）。 這在概念上非常簡單。
美杜莎查詢
“當我們增加人的能力來完成自己的任務，我們應該小心，不要無謂地削減他們能做什么。”
– 杰里米·基思
媒體查詢，事實證明，是非常剛性的。 通常情況下，你不得不使用斷點的方式是不完全直觀，也不內嵌核心的設計訴求。 換句話說，你必須適應你的設計愿望的能力。 所以，你可以有你自己的閾值，一個充滿活力的想象力，但更可能媒體的質疑不會讓你申請他們，你設想的方式。
媒體查詢的捍衛者應該明白，效率是什么使任何有效的努力值得稱贊。 花幾分鐘甚至幾小時扭捏那些討厭的指令，然后不得不重新調整他們要進行調整每一次這簡直是一個遞歸的噩夢。 這有什么不妥基于移動設備（如智能手機，平板電腦等）廣泛的分類設置斷點？！
在文章“ 設計的斷點 ，“斯蒂芬干草建議定義基于設備類斷點。 由幾個斷言的帶動下，我踏上了一個小型研究項目，后來我轉換成博客文章 就證明了這對還是錯。 而在這我是否最近進行的一項民意調查媒體查詢應針對設備類 ，約54％的受訪者表示肯定。 但沒有直觀的方式來做到這一點的媒體查詢，即使你想。
在我的愚見，從網頁設計師的角度來看，媒體查詢的功能集是不完整的。 它是如此，因為設計師有想象力和食欲有更多的斷點比媒體查詢目前可以提供（也許永遠會在未來的）。
新斷點
正如前面提到的一點，我們找到并設置新的門檻的能力將決定我們的概念化，我們可以設置一個觸發新的行動能力。 通過這樣做，我們可以引入更多的調整到一個固有的靜態和不靈活的環境。
在語境網頁設計斷點
明天的網站有超過響應 – 他們必須是上下文了。 的靈活性和流動性這些概念必須超越的屏幕尺寸。 一個尺寸適合所有網站的時代將要走到盡頭，并通過網站也適應用戶的需求和期望所取代。
要啟用此功能，我們必須概念化多個閾值，但首先我們需要找出哪些參數來追蹤。 在尼克·芬克的精辟演講“ 的語境網絡 ，“他強調了在網頁設計方面的四個方面： 用戶，任務，環境和技術 。 當然，所有四個為外推法的寶庫，但我們應該真正關注？
我們可以問數以百計的有關用戶，他們的任務，他們的環境和什么樣的技術，他們可以訪問的問題，甚至上千。 然而，我們必須對我們目前的和公開的能力立足這些問題，以獲得對上述四種參數的數據。 一些可能的問題可能是：
- 什么是用戶的物理能力？
如果用戶是視障或聽障，我們將需要增加更多的輔助功能，將提高他們的經驗。 - 哪里是用戶的大致位置？
知道哪里是用戶為我們提供了他們的文化，經濟狀況，人口，等一個好主意 - 現在是什么時候在用戶的位置？
人們通常習慣的動物，而且更有可能會在某個時間執行某些操作。 - 什么是用戶的設備？
一個電話是不是平板電腦，以及平板電腦不是PC。 不同的設備具有不同的能力和將被用于不同的任務。 - 什么是用戶有親和力？
哪些用戶喜歡（和不喜歡的）將在幫助我們優化和交付內容發揮強有力的作用。
有很多方法可以與當今的瀏覽器中可用的技術回答上述問題。 如果沒有，那么我們真的需要更加努力地工作，以建立他們的，特別是考慮到一個問題，同樣重要的輔助功??能。
那么，我們如何設計一個網站是上下文？ 如何將我們想象中的斷點上下文意義？ 這里有一個場景。
讓我們假設它是在早上6:00，和你的鬧鐘響起。 你架著你的廚房弄點早餐，準備和標題出去打工之前。 你看中了雞蛋，但你打開冰箱，也沒有雞蛋。 所以，你看中別的東西，但你想訂購一些雜貨，讓他們隨時可以拿起自己的方式下班回來。 你火了一個非常大的百貨連鎖店的網站從您的Internet連接的冰箱來完成這件事。
你留下深刻的印象，只是因為這個網站是響應？ 為得到最好的交易在電子給你一個優先在這一點？ 難道你真的想提醒的是，有些你“最近瀏覽”在幾個項目中上述網站均林肯日志和一個蜘蛛俠牙刷架？ 我的意思是，這是上午06時18分，和你從冰箱瀏覽。 是否需要一個火箭科學家弄清楚，也許雜貨項目應該是一個值得一類優先次序？
我敢肯定有很多其他情況就是這樣，而且很容易的人誰不熟悉Web技術得到沮喪，怎么網站似乎仍然達不到他們的期望。 但對于我們這些誰做的，我們應該仍然可以找借口，或者我們應該嘗試在信封推進一步？
新方法
“媒體查詢允許作者以測試和用戶代理或顯示設備，獨立于所呈現的文檔的查詢值或功能?！?/p>
– 編者草案，W3C（2014年6月3日）
我最近細讀了“ 媒體查詢4級 “規范草案獲得那里的東西是領導的感覺。 我必須說，我不是很高興能與方向，那里只是似乎并沒有太大的創新在這里。
從文檔的抽象，我們得到一個什么樣的媒體查詢是作為一種方法的明確定義。 不過，我只是不明白為什么有媒體功能沒有變化，以反映目前 – 以及可能的未來 – 現實。
有什么問題有一個像設備類媒體功能phone或tablet ？ 他們就像明顯的選擇，并且，根據調查前面提到，網頁設計師想要的功能集。 有人會說，這些可能不會在未來的“東西”，但幾乎沒有可信的，因為汽車，電視，電腦，冰箱，手表和眼鏡仍然是“事”，人們發現有用的今天。 而當我們真正看到了一項決議，問題件查詢 ？
在我看來，媒體查詢（如網頁設計在多設備世界的一種工具），根本無法保持任何形式與當代網頁設計師的創作軌跡平衡，他們是網頁設計未來一個道義上是站不住腳的標準。 也許我們應該看看的各種途徑; 我想提出幾個。 他們沒有那么復雜，而我們就需要有一個帽子，外套和領帶。
帽子戲法
我們大概都熟悉CSS類選擇器在這一點上。 他們是最之一， 在網頁設計中常用的選擇器 。
.muttley .do_something {…}
我不明白的是，為什么我們不使用這些類以上媒體查詢來構建移動友好的網站？
這在我看來，設計網站為許多不同的情況會這么容易和更快，如果瀏覽器使用的HTML屬性標記（HAT）。 基本上，這將涉及到瀏覽器將特定參數的class的屬性<html>標簽（在加載頁面的過程），這將使網頁設計師可以利用這些類在他們的CSS標記。
其中一些參數可以包括以下內容：
- 設備組
固定，移動，家庭，穿，汽車等。 - 設備類
PC，手機，平板電腦，電視，冰箱，汽車，手表等。 - 輸入設備
粗，細 - 帶寬
高，中，低 - 方向
肖像，風景 - 視口的寬度和高度
在設備無關的像素，以40的最接近倍數，用一個字母前綴符合 - 本地日期和時間
在ddmmyyyy的日期，并提供24小時的表示時間格式 - 時區
UTC偏移量 - 一般地理位置
大陸和國家代碼
根據預期的需要可以添加更多的參數。 此外，所有參數將被抽象了DOM window對象，使他們很容易通過JavaScript訪問。
因此，假設有人在使用的Nexus 5手機在一個4G LTE移動網絡。 該瀏覽器將添加相關的標簽頁，留給我們這樣的：
<html class="mobile phone coarse high portrait v360w v640h d07052014 t0900 utc_a af_ng">
如果他們改變了手機的方向為橫向，瀏覽器將有狀態更新標簽，給我們這樣的：
<html class="mobile phone coarse high landscape v640w v360h d07052014 t0900 utc_a af_ng">
如果發生這種情況，網頁設計師會有很多的選擇，以快速適應跨多個邏輯斷點他們的網頁在思想字面上的速度。 讓我們考慮一個工作的例子。
我最近測試的定價表 是不是不像看到了很多的SaaS網站的這些天表。 該表是三列，并使用內置ul標簽與浮動li標簽。
定價表下面是一些常見問題的內容，也有一個多列布局。
很顯然，這些多列元素就不會顯得那么好上的所有的移動設備，因為他們會在桌面上。 所以，在響應網頁設計的精神，我們就必須使其適應更小的屏幕尺寸。 我們會做到這一點的方法是通過展示這兩種可視化組件在其完整的多列榮耀只有當網頁正在查看的橫向片劑。
這背后的邏輯是，我們希望在這方位的平板電腦有足夠的屏幕空間為整個表顯示為目的。 如果這些條件不具備，那么我們將崩潰的列是線性的和垂直的。
基本的CSS我們的價格表是這樣的：
ul { margin: 0; padding: 0; list-style: none; } ul li { float: left; width: 33%; }
因此，利用帽子，我們將使用下面的標記實現這些功能：
.mobile ul li { float: none; width: 100%; } .mobile.tablet.landscape ul li { float: left; width: 33%;}
就是這樣！ 只是禁用所有移動設備的浮動布局元素，然后重新啟用它們在橫向片。 簡單的愿望，簡單的解決方案。 你想嘗試做同樣的事情與媒體查詢？ 打招呼的StackOverflow博士為我！
顯然，采用這種方法的好處有效率是一大好處 。 你會花更少的時間建立網站，因為你不會浪費時間可笑的金額各具特色媒體查詢，更何況所有的移動設備隨之而來的測試。 其次，保持你的標記會更容易些，因為一切都將是inline和就不會有不必要的重復。 第三，你將有機會去探索更多的用例，因為將是作為閾值更合乎邏輯斷點多個參數。
許多顏色的外套
每個人似乎都被分析被迷住了。 網站分析程序，如谷歌Analytics和MixPanel，都試圖給出一個很好的圖片誰訪問了你的網站，他們停留了多久，他們來自什么網站，他們使用什么設備，等這個數據不會告訴什么你的是什么內容的訪問者有親和力。
你可以，當然，使用cookie來跟蹤訪問者到你的網站，但隨后你只能夠確定自己喜歡上你的網站，每天或每周或每月。 你將無法準確地確定他們所關心的具體內容，也可能你能夠做任何事情，他們離開之前。
跟蹤內容的親和力和適應的內容說的親和力可以真正幫助我們構建真正適應人類欲望的網站。 要真正獲得這些數據，雖然數據收集機制需要超越任何一個網站。 也就是說，所有的網站都需要以合作和透明的方式來建立這種親和形象。
COAT代表“ 累積性的，開放的親和標記 ，”這只是一個認識事物的共享方法的訪客有親和力，然后構建親和的形象。 下面是它如何工作的：
- 經常有人訪問了一堆網站。 有些是新聞網站，有些是體育網站和一些博客。 每個網頁將有一個
COATmeta標簽。 - 瀏覽器（通過COAT子引擎）會讀這個元標記，并在保留，保護和只讀localStorage的變量（可以隨意命名）增量存儲在一個以逗號分隔的格式它的價值。 所以，對于網站，我們的用戶訪問量，該值可能是
news:info:1,sports:soccer:2,blog:tech:3。 - 如果人訪問另一個體育相關的網站，該網站會從localStorage中讀?。ê透拢┑挠H和標簽。 它看到的人是服從足球，所以提供了更多的重視在主頁上的足球內容。
有了這種認識，我們可以調整一個網站的主頁，以更好地滿足用戶在一個高度專業化的方式不同需求。
COAT數據將包括在以下格式的逗號分隔的字符串：
{category_1}:{sub_category_1}:{popularity_1},…,{category_n}:{sub_category_n}:{popularity_n}
這里， category是一種類型的內容的寬泛分類; sub_category能夠進一步分類; 和popularity是訪問頻率的度量。 所以，如果我們的用戶訪問了科技博客30次一個月，參觀了體育網站的足球節，每天5次，那么我們最終會和這個標簽：
blog:tech:30,sports:soccer:150
這僅僅是一個例子; 該分類系統將通過更大的網絡社區定義和維護。 一些保障措施是到位了。 例如，如果一個網站沒有定義一個COAT meta標簽的話，那就不能夠讀取一個無論是。 此外，如果用戶在瀏覽的私模，然后COAT將被禁用。
COAT不會跟蹤任何個人信息。 這樣做的目的不是要找出誰一個人是和他們可能會，但要獲得他們喜歡什么樣的內容（以及他們喜歡它）的廣闊畫面，讓網站能夠個性化他們的瀏覽體驗。
配合
讓我們面對這個事實：JavaScript是真棒。 這不是很平易近人的大多數網頁設計師，但它的功能僅僅是巨大的，而且它主宰網站做偉大的事情，將來，即使它在今天的網站功能的貢獻是完全沒問題的。
HTML和CSS是網站建設的一個偉大的二人，并曾因此相當長一段時間了。 然而，僅HTML似乎已經允許保持與JavaScript的關系。 當然，CSS是“用于描述文檔的外觀和格式樣式表語言?！钡湍壳扒闆r來看通過網絡功能的設備主宰的世界，很多決定一個網站的外觀和感覺的因素已經超越CSS的境界 。
其結果是，CSS需要被允許的“朋友”的JavaScript，并要求其在執行特定任務的幫助。 真的應該有一種方法可以直接用內聯CSS規則鏈接的Javascript功能。 一個辦法是通過超然內聯表達式（TIE）。 TIE將提供鏈接的CSS規則與JavaScript表達式，開辟更令人驚訝的機會，對網站功能的機制。
讓我們來看一個簡單的例子。 假設我們已經在我們的主頁的側邊欄褒獎組件：
我們想把這個相同的組件到另一個頁面的主要內容區域，某個地方，我們有更多的寬度與合作：
這就是所謂的模塊化設計，并在概念上這是一個非常簡單的想法。 然而，我們就會有一個相當困難的時間在CSS中實施這一（ 伊恩風暴泰勒發現 ），因為沒有一個簡單的方法來CSS樣式應用到基于其容器的大小的見證組件。
這個場景是什么引發了人們的叫囂元素的查詢，壓倒一切的是需要一種方式來定義適應其包裝容器的大小可重用的模塊。 如果本地的CSS實現某種功能的TIE，那么我們也許能夠寫在CSS中一個簡單的表達式來實現這一目標：
.testimonial { … } .testimonial[expr="if @parent:width less than 200px"] { … } .testimonial[expr="if @parent:width between 200px and 500px"] { … }
對于第一個規則集，我們會風格.testimonial像往常一樣。 對于第二個規則集，該表達式可能意味著，當父元素的寬度.testimonial是小于或等于200個像素，則應用相應的聲明，以該DOM元素（即父元素）。 這同樣適用于第三個規則集，從而宣告時應用的父元素具有201像素到500像素的寬度。
基本上，CSS只會做什么??提供指導，而JavaScript的會做繁重的CSS是不太適合。 不是寫的CSS規則集樣式，然后跳轉到JavaScript來激活它們，我們將簡單地通過在CSS中的表達兩者都做。 因為我們正在同一個DOM元素上，它是有道理的，要有一些簡單而直觀的方式到時尚風格，并直接從CSS中激活它（即DOM元素）。
任何這樣的TIE實現應該足夠強大，讓網頁設計師在他們的創造力幾乎速度來實現功能。 換句話說，如果他們能夠想象的那樣，設計師應該能實現它 – 或接近它的東西 – 幾乎瞬間。
全部放在一起
讓我們來考慮一個場景，展示了如何建立一個網站，當所有三個能夠融合在一起。
當你讀到這封信的時候，世界杯將是，與來自世界各地的球迷將聚集在巴西體驗杯Mundial酒店的驚險刺激。 讓我們假設你是那些球迷之一，是在圣保羅，還出現了智能手機和谷歌的玻璃與您聯系。
一個流行的在線體育的目的地，恰好被覆蓋的情況下，通常會毯其網站與世界杯的功能在其他體育賽事在世界其他地區正在進行的費用。 該網站將采用三種方法前面，以提供一個非常特殊的用戶體驗解釋。
建立各種內容組件后，該網站的開發人員應該能夠做幾件事情沒有太多的壓力：
- 優化網站專為谷歌玻璃，提供了更簡單，界面更輕薄更容易導航。 此外，調整色彩對比，一天的時間（即切換到文本的光在深色背景在夜間），用HAT的設備類的參數。
- 提供在不同的城市在巴西當地的景點更多的內容（例如運動吧，其它觀賞中心等）只有在接入設備是一個智能手機或平板電腦，并恰好是在巴西（使用HAT的位置參數）。
- 領導與賽前分析，球隊和球員配置文件，和商品如果用戶訪問六小時即將到來的比賽中的網站（使用與領帶的組合帽子的時間參數）。
- 領導與比賽的亮點和賽后的分析，如果用戶訪問12小時內網站比賽結束后。 對于比賽的亮點上使用相同的代碼庫（使用HAT設備級參數）智能手機和平板電腦提供不同的布局設計。
- 鉛在更加突出的位置，比足球高爾夫功能，如果我們確定（通過COAT）用戶喜歡比后者前者更多。 但仍然顯示比賽的亮點在側邊欄較窄像素寬度（使用CSS中的TIE風格特點以模塊化的方式）。
- 默認為內容的常規格式，如果我們不能確定用戶是否喜歡足球或其他運動。
正如你所看到的，高度個性化和精心加權用戶體驗的排列和機會是豐富的，容易實現的，如果所有三種方法進行審議。 我們不一定要全部使用它們，但它很高興知道他們在那里，如果我們想。
該Polyfill路
“你不能總是得到你想要的。 但是如果你嘗試有時候，你也許會發現，你得到你所需要的?！?/p>
– 滾石樂隊
哪來的網頁設計界是沒有polyfills？ 如預期即使是最好的善意技術并不總是有效的，有時它有差距的功能。 “只要肅殺，polyfill”將是手術的口頭禪在這些情況下，與過去幾年確實是一個名副其實的polyfill-palooza 。
所有本文中到目前為止概述的功能僅僅是思想和在CSS或媒體查詢任何即將到來的規范草案未指定用途的，所以你不能使用它們，現在，即使你想。 然而，這并不意味著我們不能做一些事情在其間。
Restive.JS
我說過，我是用一個插件來建立一個網站。 那么，這將是Restive.JS ，一個jQuery插件，我開發了大約一年前，擁抱并實現HAT原則。 使用的內置選項breakpoints ， classes和命名一個特殊的功能turbo_classes ，Restive.JS填入您<html>或<body>與價值觀，使您可以輕松通過內聯CSS更適應網頁的布局標記類屬性自然的設計靈感。
一旦你的基本思想，用它來建立新的響應和自適應網站是很容易的，因為是將所述的功能，現有的網站。 我最近寫的教程“ 如何使任何網站響應 ，“你可以仔細閱讀在您的休閑。
你還可以了解更多通過Restive.JS’文件 ，并從GitHub的自述 。
寬容的一個注記
由于創意和專業技術人員，我們需要開放給其他人的意見。 常人群邁向僅僅是因為punditocratic共識的位置，沒有停下來質疑其背后的根本理由。
拿設備檢測。 有人說這是一種不好的做法。 我的問題是為什么呢？ 是不是因為它被認為是不可靠的？ 我們可以把它可靠。 有沒有擔心它是不是高性能？ 然后，我們可以緩存數據。 解決大問題應該是一個包容性的努力，并采用排除法排除方法可能會反噬我們，如果有人能夠改善該方法。
創造力是一個貪得無厭的黑客，只要想象力不斷鞭策勤勞，那么最好的工具和方法，最終將讓位于更好的。 保持清晰，并緊緊地抓住手頭的任務 – 和它的成功完成 – 不應該妨礙我們成為強大與我們的工具集。 正如偉大的亞伯拉罕馬斯洛說：“如果你只有一把錘子，一切看起來都像釘子?！?/p>
在關閉（但向前進）
更多的東西并不一定是好事。 但是，當涉及到斷點，“越多越好”確實不順。 作為人類，我們需要根據特定的閾值之間的特定觸發器動作。 更多定義這些閾值可以開辟機會，創造了適應超出屏幕大小等等很多方面的網站，并探索將變成是有益的。
然而，正如我們開辟新領域與新的斷點，我們應該以一種方式，既方便快捷的為網頁設計師這樣做; 我們的方法的魯棒性不應該使我們變得靈活。 同程網標準工作，我們很可能將不得不polyfill我們到應許之地。 但是這不應該從構建每一個設備上，并在眾多的用戶場景，工作真棒網站阻止我們。
