Day6 如何做出響應式網頁(RWD)? - iT 邦幫忙 | 響應式網頁語法
常常聽到響應式網頁,但是怎麼做呢?響應式設計(Responsivewebdesign)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定以前,我們來看一個小小的例子瞭解RWD。(此例來自:Bootstrap优站精选中的Azul網站)先看header的部分:我們可以觀察到它隨著寬度變小後,它的選項變爲漢堡選單,以及文字內容自動換行。接著我們看看網站內容的RWD變化。我們可以觀察到中央三個區塊內容,隨著寬度縮小,之間的間距變小,到一定程度後,由橫向排列變動爲縱向排列。那麼我們要怎麽做到讓網頁能夠自適應呢?依靠的是兩件事:CSS3...
常常聽到響應式網頁,但是怎麼做呢?
響應式設計(Responsive web design)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定以前,我們來看一個小小的例子瞭解 RWD。(此例來自:Bootstrap 优站精选 中的 Azul 網站)
先看 header 的部分:
我們可以觀察到它隨著寬度變小後,它的選項變爲漢堡選單,以及文字內容自動換行。接著我們看看網站內容的 RWD 變化。
我們可以觀察到中央三個區塊內容,隨著寬度縮小,之間的間距變小,到一定程度後,由橫向排列變動爲縱向排列。
那麼我們要怎麽做到讓網頁能夠自適應呢?依靠的是兩件事:CSS3 所提供的媒體查詢功能及 viewport 的設定。
媒體查詢功能透過媒體查詢功能,我們可以得知用戶裝置的相關資訊,就可以進一步針對裝置套用合適的 CSS 。那麼媒體查詢功能可以查詢什麼資訊呢?
1.width:視區寬度2.height:視區高度3.device-width:裝置寬度4.device-height:裝置高度5.orientation:裝置寬高比6.aspect-ratio:視區寬高比7.其他還可以查詢 color 、 hover等,更多詳細內容可以查詢 W3Schools
一般我們會以視區寬度爲主,因爲視區才是真正代表目前瀏覽器渲染的範圍。在 RWD 中我們最常使用媒體查詢功能得知視區寬度,我們可以透過滾輪往下閱讀內容,但我們不會希望使用者要使用滾輪往右閱讀內容,也就是網頁內容的寬度不能超過使用者視區寬度。
Media Types (根據 W3Schools)1.all:所有裝置2.print:印表機列印輸出3.screen:一般電腦螢幕4.speech:朗讀式裝置
如何撰寫媒體查詢撰寫媒體查詢會伴隨條件語法,包含 only、and、not。only 表示指定特定單一條件,and 表示多個條件都必須符合, not 表示不要某一個條件。這三種條件判斷可以同時存在,中間使用,隔開即可。...