當提到響應式佈局,我們腦中會出現bootstrap的概念。響應式web佈局是讓使用者透過不同尺寸的瀏覽器都可以獲得良好視覺的一種方法。是目前比較流行的一種佈局方法。
響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠相容於多個終端機-而不是為每個終端機做一個特定的版本。這個概念是為解決行動網路瀏覽而誕生的。 (推薦學習:Bootstrap影片教學)
響應式佈局可以為不同終端的使用者提供更舒適的介面和更好的使用者體驗,而且隨著目前大螢幕行動裝置的普及,用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到許多的創新,也看到了一些成形的模式。
優點:
面對不同解析度裝置彈性強
能夠快速解決多裝置顯示適應問題
#缺點:
相容於各種裝置工作量大,效率低
程式碼累贅,會出現隱藏無用的元素,載入時間加長
其實這是一種折中性質的設計解決方案,多面向因素影響而達不到最佳效果
一定程度上改變了網站原有的佈局結構,會出現用戶混淆的情況
我們在上面了解了什麼是響應式佈局,那在我們的實際專案中該怎麼去設計呢?
在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾,還要來個不同尺寸設備,我們該怎麼淡定下來呢?
有需求就會有解決方案,說到響應式佈局,就不得不提起CSS3中的Media Query(媒介查詢),這可是個好東西,易用、強大、快捷… …Media Query是製作響應式佈局的一個利器,使用這個工具,我們可以非常方便快捷的製造出各種豐富的實用性強的介面。
CSS3中的Media Query(媒介查詢)是什麼?
透過不同的媒介類型和條件定義樣式表規則。
媒介查詢讓CSS可以更精確作用於不同的媒介類型和相同媒介的不同條件。
媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和”小於或等於」。
如:width會有min-width和max-width媒介查詢可以用在CSS中的@media和@import規則上,也可以用在HTML和XML中。
透過這個標籤屬性,我們可以很方便的在不同的設備下實現豐富的介面,特別是行動設備,將會運用更加的廣泛。
更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!
以上是bootstrap是響應式佈局嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!