首頁 > web前端 > H5教程 > 響應式佈局是什麼?響應式佈局的介紹

響應式佈局是什麼?響應式佈局的介紹

不言
發布: 2018-10-18 10:59:28
原創
5484 人瀏覽過

響應式佈局是什麼?現在響應式佈局是越來越火,但是響應式佈局究竟是什麼可能很多的朋友還是不太了解,那麼,接下來的這篇文章就給大家來介紹一下什麼是響應式佈局,有興趣的朋友可以看一下。

首先我們來看看響應式佈局是什麼?

根據百度百科我們可以知道:響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端機做一個特定的版本。這個概念是為解決行動網路瀏覽而誕生的。

通俗來說,響應式佈局就是做一個網站同時能相容多個終端,由一個網站轉變成多個網站,為我們大大節省了資源。

響應式介面有四個層次:

1、同一頁在不同大小和比例上看起來都應該是舒適的;

2、同一頁面在不同解析度上看起來都應該是合理的;

4、同一頁面在不同操作方式(如滑鼠和觸控螢幕)下,體驗應該是統一的;

#5 、同一頁面在不同類型的裝置(手機、平板、電腦)上,互動方式應該是符合習慣的。

在知道了響應式佈局是什麼後,我們再來簡單說一說#響應式佈局的用法

1、佈局及設定meta標籤

當創建一個響應式網站,或是非響應式網站變成響應式的時候,首先要關注元素的佈局;比如,在手機設備上,我們要禁止用戶來縮放螢幕。不禁止的話,可能在顯示上會造成錯位,以及顯示的不是手機網站的樣式。所以,我們要透過程式碼來禁止使用者在手機端上縮放螢幕,已達到正常的手機網站效果。

2、透過媒體查詢來設定樣式media query

media query 是響應式設計的核心,它能夠和瀏覽器溝通,告訴瀏覽器頁面如何呈現,假如一個終端的解析度小於980px,那麼可以這樣寫,這個時候的佈局會覆蓋掉先前設定的佈局。

3、設定多種視圖寬度

4、響應式的圖片

#響應式佈局的用法在這裡就簡單介紹一下,對於響應式的深入了解大家可以關注php中文網的相關欄位進行學習! ! !

以上是響應式佈局是什麼?響應式佈局的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板