響應式網站設計:需要了解的條款




您不禁會聽到“響應式網站設計”。這些網站為用戶提供了一致且令人愉悅的體驗,無論他們使用何種類型的設備。 因此,例如,如果我使用智慧手機查看產品訊息,那麼當我切換到我的平板電腦購買時,該網站的外觀和感覺會相同。 簡單的概念,對嗎? 這就是簡單的目的! 設計一個響應式網站是一個過程,對於非設計師來說,這可能會讓人感到恐慌。 在深入研究RWD之前,您可以快速查看一些您應該了解的術語。
無論您打算建立自己的響應式網站還是聘請設計師,知道您在說什麼總是有幫助的! (我們也會通過給你有用的連結練習一些內容策略,以便你可以學到更多知識或看例子。)下面是你想學習的一些關鍵詞:
CSS3 。 這是一種控製網頁佈局和風格的語言。 它從字面上將顏色和生活(以文體元素的形式)增加到您的網站。
媒體查詢 。 在CSS3中,媒體查詢允許您將內容(無論是影音還是文本或圖像)呈現給指定範圍的設備,而無需更改內容。 媒體查詢可以查找瀏覽器窗口和設備的寬度和高度,方向和分辨率等內容。 例如,如果它檢測到有人擁有智慧手機,則可以使用特定佈局進行響應。 它將“重新構建”適合屏幕的內容。
流體網格 。 RWD的創造者Ethan Marcotte表示,響應式設計有三個組成部分:流體網格,流體介質和媒體查詢。 屏幕範圍從小巧的手機到30英寸的台式機,網站必須對這些和任何兩者之間做出最佳響應。 一個網格被分成許多列,然後每個元素被設計成具有成比例的寬度和高度。 無論設備如何,這些元素都會按比例調整其寬度和高度,並再次保持在父容器的尺寸範圍內 – 這意味著它不會太小或太大。
教程可以幫助我們更好地理解這些術語,並了解它們在響應式網站結構中的工作方式。 這裡有幾個讓你開始:
Hongkiat.com 。 一個一站式的教程,從介紹到RWD到高級技巧。
ResponsiveWebDesignBlog 。 這個部落格涵蓋了從教程到示例的所有內容,並為RWD書呆子或渴望成為RWD書呆子的人提供書籍建議。
SmashingMagazine 。 提示更好的響應式網站。
NetMagazine 。 此連結與Ethan Marcotte進行了一次問答。 從馬的嘴裡獲取答案。

我喜歡這篇文章 ( 0 ) 我不喜歡這篇文章 ( 0 )

發表迴響

Close Menu