使HTML設計響應的步驟是什麼？

Question

我剛剛瞭解了響應式設計。我的問題是，HTML設計師必須採取哪些步驟才能使設計響應？

看來，一個負責任的設計是所有關於使用@media查詢和控制元素的頁的流量，如果它得到通過設置max-width，min-width和操作取決於瀏覽器窗口的大小浮動，邊距和填充調整。

是否有除了@media查詢其他任何需要的響應式設計做？

Answer 1

響應圖像（在HTML針對不同的情況不同的圖像）是一個重要問題。

一些重要的位：

使用 srcset

• 屬性爲不同版本的同一圖像之間進行切換。 http://responsiveimages.org是資源就這個問題很好。

• 成像使用自動化工具 - 我最喜歡的是步兵，在這裏也差不多了一個很好的讀取：http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

它真的有很多不同之處，當用戶在移動設備上打開一個頁面尺寸被確定爲它的圖像，更少的數據和良好的負載更快:)

工具，比如咕嚕可能看起來像他們採取一些工作設置，但一旦你開始使用它那麼容易和快速。

更多的閱讀材料：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

http://blog.cloudfour.com/responsive-hero-images/

Answer 2

絕對。有從Marcotte的阮經天的原書迴應式網頁設計，迴應式網頁設計（abookapart.com/products/responsive-web-design）三個主要租戶。它們是：

1 - 流體網格 -基於百分比的寬度代替佈局/網格的像素。這可以說比媒體查詢更重要，因爲它可以讓網站變得流暢而不固定。因此，智能手機和平板電腦的尺寸太大而無法計數，因此採用流暢的佈局可確保您的設計能夠很好地適應不同的設備寬度。

2 - 靈活圖像 -它們基本上是在瀏覽器變小時收縮的圖像。在響應的環境中，圖像周圍存在很多挑戰，這就是爲什麼@ Ivan86巧妙地推薦在圖像標籤上使用srcset屬性，我也強烈建議，但也可以等待，直到您熟悉基本知識爲止。既然你是剛剛起步，讓我們保持簡單的用「靈活的圖像」，這是被設定爲max-width: 100%與基於％身邊父容器的圖像。這允許圖像隨着父容器（div，figure等）變小而縮小。不過，如果你碰巧對srcset感興趣，我最近發佈了兩篇文章：www.richfinelli.com/srcset-part-1,http://www.richfinelli.com/srcset-part-2/，它解釋瞭如何使用這個新屬性。

3 - 媒體查詢 -正如您所說，用於您的css根據可用的瀏覽器寬度更改佈局。

正如我想你會發現，一旦你進入響應式網頁設計，你會發現自己可能會遇到多層次的挑戰。但是我建議從abookapart.com購買Ethan Marcotte的書以獲得一個好的跳躍在上面。很短，實際上很有趣。