自適應設計（響應式設計）

通過平板電腦和手機訪問Internet的用戶正在增加。 正如您已經知道的那樣，這意味著僅設計一個在我們的計算機上看起來不錯的好的網頁是不夠的：還必須在每個移動設備上看到它。 問題？ 不同的屏幕尺寸和分辨率。 這就是為什麼很難做出適合所有媒體的設計的原因（著名的 響應設計，翻譯為 適應性設計).

進行具有這些特徵的設計時，請記住以下提示。 請注意！

自適應設計的技巧

1. 製作一個簡單的模板簡單地說，我不是說平淡。 我說的是 結構 網站的HTML：越清晰越好。 請記住，計算機屏幕可以容納三個垂直列。 在手機屏幕上，您只能容納一個。 考慮一下，以及如何重新定位元素。
2. 消除不必要的一切避免使用jQuery效果，Flash動畫和其他任何會減慢頁面加載速度的代碼。 這種類型的內容越少，Web加載速度越快。
3. 定義樣式 每個“大小”的CSS（例如）創建一個tiny.css，small.css和big.css，該設備基於查看該設備的設備運行。 例如：
   

   @import url（tiny.css）（最小寬度：300像素）；

   @import url（small.css）（最小寬度：600像素）；

   @import網址（big.css）（最小寬度：900像素）；

4. 最常用的分辨率320像素/ 480像素/ 720像素/ 768像素/ 900像素/ 1024像素
5. 使您的模板靈活盡可能使用百分比而不是固定金額。 以下是一些等效的參考：200px = 15'38％/ 300px = 23'07％/ 800px = 61'5384615384％
6. 版式 比以往任何時候都更加重要有時您的設備屏幕可能很小，以至於您只能看到文本。 這就是為什麼我們必須在網站上非常仔細地選擇最好的字體，以便當它們減小尺寸時不會失去可讀性。 另外，我們必須知道如何將更多中性字體與具有個性的其他字體組合在一起，從而賦予網絡必要的字符。 因此，第一個技巧是您花時間選擇要使用的字體。
7. 使用 高質量圖像隨著空間的縮小，圖像將伴隨它。 選擇在縮小時不會損失質量的對象，以及在縮放時仍能工作的對象。 品質不佳的圖片會使您的網站看起來很糟糕。
8. 總是看到您的圖像 滿的通過在CSS中添加img（寬度：100％；）代碼來防止照片被剪掉。 這樣，您告訴設備重新計算要賦予圖像的高度，以便可以看到其寬度的百分之一百。
9. 全部低 相同的網址忘記像www.mysite.com/mobile之類的子域，因為根文件夾中的相同index.html文件適用於所有設備（如果您正確地進行了自適應設計）。 您已經知道優點：子域越少，頁面加載速度就越快。
10. 利用支持：富於想像力從台式機訪問網站與從iPad或手機訪問網站不同。 首先，您將以一種輕鬆自在的方式導航。 對於後者，您將在空閒時間執行此操作，並在感到無聊時立即關閉窗口。 利用這些條件來娛樂用戶，並使他們在幾分鐘內會獻給您的樂趣中。 也許當他回到家時，他會決定以一種更輕鬆的方式再次拜訪您。
11. 獲得靈感 在數字出版物中，您會想知道為什麼要這樣做。 非常簡單： 電子雜誌 （很好）知道如何利用支持，他們的設計非常聰明。 從他們那裡得到啟發，創建一個很難離開的網站。

更多信息 - 電子雜誌

資源 - 斯波利奧960克，柱狀