花了十年的時間 響應式網頁設計 (RWD) 成為主流,因為 卡梅倫·亞當斯(Cameron Adams)首次介紹 這個概念是在 2010 年提出的。這個想法很巧妙——為什麼我們不能設計適應正在查看的設備視口的網站?
什麼是響應式設計?
響應式網頁設計是一種設計方法,可確保網站在任何設備上提供最佳瀏覽體驗,無論屏幕尺寸或分辨率如何。 它涉及使用靈活的佈局、基於網格的佈局和媒體查詢來創建一個可以根據正在查看的屏幕大小進行調整的站點。 這意味著採用響應式網頁設計的網站在台式電腦、平板電腦或智能手機上的外觀和功能都很好。
換句話說,可以調整圖像等元素以及這些元素的佈局。 這是一個視頻,解釋了什麼是響應式設計以及為什麼您的公司應該實施它。 如果您要進行新的網站設計或開發 Web 應用程序,響應式 Web 設計是必須的,而不是一種選擇,因為超過一半的 Web 流量來自具有不同視口寬度和高度的移動設備。
響應式設計也是網頁設計師的最佳選擇,他們不必根據設備或視口構建獨特的獨立體驗。 響應式網頁設計可以使用 的CSS.
響應式設計 CSS 視口查詢
下面是一個使用媒體查詢根據視口調整字體大小的樣式表示例:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
瀏覽器知道它們的大小,它們從上到下加載樣式表。 通過查詢適用於屏幕尺寸的樣式,您可以為每個最小和最大設備寬度設置特定的樣式元素。 這並不意味著您必須為每種尺寸的屏幕設計不同的站點,您只需要使用媒體查詢來移動必要的元素。
今天,以移動第一的心態進行操作是基準標準。 一流的品牌不僅在考慮其站點是否適合移動設備,還在考慮完整的客戶體驗。
Monetate首席執行官Lucinda Duncalfe
這是來自的信息圖表 Monetate 說明為多個設備創建一個響應式設計的潛在好處:
您的網站是否響應?
查看您的站點是否響應的一種簡單方法是僅擴大或縮小瀏覽器窗口以查看元素是否根據瀏覽器的寬度移動。
為了更精確,請將您的 谷歌瀏覽器 瀏覽器訪問您的網站。 選擇 查看>開發人員>開發人員工具 從菜單中。 這將在面板或新窗口中加載一堆工具。 單擊開發人員工具菜單欄左側的小圖標,該圖標看起來像手機和平板電腦圖標。 您可以選擇一些標准設備,甚至可以更改是要水平還是垂直查看頁面。
您可以使用頂部的導航選項將視圖從橫向更改為縱向,甚至可以選擇任意數量的預編程視口大小。 您可能需要重新加載頁面,但這是世界上最酷的工具,用於驗證您的響應式設置並確保您的網站在所有設備上看起來都不錯!