響應式入門之 Media Query

2021-09-23 15:35:46 字數 1578 閱讀 6789

響應式**設計?

響應式**設計,能讓你的頁面在所有客戶端瀏覽器上表現的都非常好。

響應式**只要有html和css就可以了。當然如果有特殊要求,適當加入js也是有必要的。

什麼是視口?

就是使用者能看到的頁面可見區域就叫視口。

在平板電腦和手機出現之前,網頁只為電腦螢幕而設計。 那個年代,乙個頁面往往只有一種布局,固定的尺寸。

後來平板電腦和手機出現之後,為了能更好的顯示頁面,起初瀏覽器廠商的解決方案是提供乙個自動縮放的功能。把pc頁面縮放到手機螢幕那麼大。盡量讓頁面全部顯示出來。 感覺還不錯。畢竟內容全部顯示了。

但是預設情況下,頁面文字很小。小的可憐,幾乎看不見。 很快,響應式**的設計方案也緊羅密布地制定開來。 各大瀏覽器廠商開始制定統一標準。以推進響應式**的發展。

設定視口

具體一點就是:12

3456

789在 html 中,meta 標籤沒有結束標籤,meta標籤定義了與文件相關聯的名稱或值。可提供有關頁面的元資訊。

width=device-width 樣式中定義的寬度等於裝置中定義的寬度

initial-scale=1.0 縮放比例1

minimum-scale=1.0 最大縮小比例1

maximum-scale=1.0 最大放大比例1

上段**的最終作用是,移動客戶端會按你設定的尺寸來顯示頁面。並且比例是1,不可通過手勢放大縮小。 如果不寫這段**,移動客戶端的瀏覽器真的會以它的1px來顯示你設定的1px。最終效果是被縮放的效果,字小小的那種。 總之,做響應式**的時候記得至少要加上如下宣告。

1 今天的主題:什麼是media query?

css2允許使用者對特定media型別制定樣式。

例如: 針對screen(螢幕)用 @media screen裡設定的樣式。 針對列印樣式用 @media print 裡的樣式。

css3提供了更加強大的功能。 可以針對不同media型別設定樣式,還根據設定的寬度或者高度指定樣式。

咱看下面的例子:12

3@media screen and (max-width: 500px)

}意思就是: 當螢幕的寬度小於等於500px的時候body的背景顏色為黑色。

平時可用如下口訣幫助記憶:

「當」 ,這個時候寫 @media 「螢幕」,

寫screen 「的最大寬度為」, and (max-width:) 「500px」,

max-width:後加上500px 「的時候」,

這個時候加上大括號。

拼在一起就是: @media screen and (max-width: 500px) {} 然後大括號裡就寫我們要設定的樣式。

是不是很容易記憶?多寫幾遍就會了。

相關英語

viewport = 視口

content = 內容

device-width = 裝置寬度

initial-scale = 初始-比例

minimum-scale = 最小-比例

maximum-scale = 最大-比例

media = **

query = 查詢

響應式入門之 Media Query

響應式 設計?什麼是視口?就是使用者能看到的頁面可見區域就叫視口。在平板電腦和手機出現之前,網頁只為電腦螢幕而設計。那個年代,乙個頁面往往只有一種布局,固定的尺寸。後來平板電腦和手機出現之後,為了能更好的顯示頁面,起初瀏覽器廠商的解決方案是提供乙個自動縮放的功能。把pc頁面縮放到手機螢幕那麼大。盡量...

CSS3響應自適應布局Media Queries

media queries是css3新增加的乙個模組功能,其最大的特色就是通過css3來查詢 然後呼叫對應的樣式。在徹底地了解media queries之前,我們需要了解其中的兩個重要部分,第乙個是 型別,第二個是 特性。型別 media type 在css2中是乙個常見的屬性,可以通過 型別對不同...

響應式網頁設計入門

響應式網頁設計 responsive web design 這個概念在2000年的時候就有人提出來了,其實我更喜歡將其翻譯為自適應網頁設計,阮一峰關於responsive web design的一篇文章就是翻譯為自適應網頁設計,但是國內都採用了響應式網頁設計這一生硬的翻譯 你能第一次看到響應式網頁設...