用 Media Queries 設計移動網頁端

2021-08-27 23:21:53 字數 1704 閱讀 3752

今天來通過media queries樣式模組,可以實現根據移動裝置的螢幕大小,定製**頁面的不同布局效果。它的優點是開發者只需要實現一套頁面,就能夠在所有平台的瀏覽器下訪問**的不同效果。

用 viewport 設定適應移動裝置螢幕大小

1.什麼是 viewport

如果開發者沒有定義這個虛擬視窗,移動版 safari 的虛擬視窗預設大小為 980 畫素。現在,除了safari瀏覽器外,其他瀏覽器也支援 viewport 虛擬視窗。但是,不同的瀏覽器對viewport視窗的預設大小支援都不一致。預設值分別如下:

android browser 瀏覽器的預設值是 800 畫素;

ie 瀏覽器的預設值是 974 畫素;

opera 瀏覽器的預設值是 850 畫素。

2.如何使用 viewport

viewport虛擬視窗是在meta元素中定義的,其主要作用是設定web頁面適應移動裝置的螢幕大小。

如以下**:

該**的主要作用是自定義虛擬視窗,並指定虛擬視窗width寬度為device-width,初始縮放比例大小為1倍,同時不允許使用者使用手動縮放功能。

**中的 content 屬性內共定義三種引數。實際上 content 屬性允許設定6種不同的引數,分別如下:

width 指定虛擬視窗的螢幕寬度大小。

height 指定虛擬視窗的螢幕高度大小。

initial-scale 指定初始縮放比例。

maximum-scale 指定允許使用者縮放的最大比例。

minimum-scale 指定允許使用者縮放的最小比例。

user-scalable 指定是否允許手動縮放。

1、定義當前螢幕可視區域的寬度最大值是600畫素

那麼 small.css 怎樣寫的呢

@media screen and (max-width:600px)  }
2、定義當前螢幕可視區域的寬度長度在600到900畫素之間

@media screen and (min-width:600px) and (max-width:900px)  }
3、當移動螢幕處於縱向(portrait)模式下時,應用portrait樣式檔案,當移動裝置處於橫向(landscape)模式下,應用landscape樣式檔案

語法格式如下圖所示:

1、使用 media queries 樣式模組時都必須以「@media」方式開頭

2、media_query 表示查詢關鍵定,比如說 not only and 等等

3、media_type 指定裝置型別(也稱**型別)

4、media_feature 定義 css 中的裝置特徵  

media_type裝置型別一覽表

media_feature裝置特徵一覽表 大部分裝置特徵都允許接受min/max的字首

Media Queries語法總結

media queries的語法如下所示 media media query media type and media feature 使用media queries樣式模組時都必須以 media 方式開頭。media query表示查詢關鍵字,在這裡可以使用not關鍵字和only關鍵字。not關鍵...

Media Queries語法總結

media queries 的語法如下所示 media media query media type and media feature 使用media queries 樣式模組時都必須以 media 方式開頭。media query 表示查詢關鍵字,在這裡可以使用 not關鍵字和 only 關鍵字...

Media Queries移動裝置樣式

本節我們將為你帶來一種全新的樣式技術。通過media queries樣式模組,可以實現根據移動裝置的螢幕大小,定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面,就能夠在所有平台的瀏覽器下訪問 的不同效果。在開始介紹media queries知識之前,先來看看乙個傳統的 在各種移動裝置上的...