css用 media適配不同尺寸的手機布局方式

2021-07-27 17:11:50 字數 3391 閱讀 4461

使用 @media 查詢,你可以針對不同的**型別定義不同的樣式。

@media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,@media 是非常有用的。

當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

@media mediatype and|not|only (media feature)

描述all

用於所有裝置

aural

已廢棄。用於語音和聲音合成器

braille

已廢棄。 應用於盲文觸控式反饋裝置

embossed

已廢棄。 用於列印的盲人印刷裝置

handheld

已廢棄。 用於掌上裝置或更小的裝置,如pda和小型**

print

用於印表機和列印預覽

projection

已廢棄。 用於投影裝置

screen

用於電腦螢幕,平板電腦,智慧型手機等。

speech

應用於螢幕閱讀器等發聲裝置

tty已廢棄。 用於固定的字元網格,如電報、終端裝置和對字元有限制的便攜裝置

tv已廢棄。 用於電視和網路電視值描述

aspect-ratio

定義輸出裝置中的頁面可見區域寬度與高度的比率

color

定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置,則值等於0

color-index

定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表,則值等於0

device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的比率。

device-height

定義輸出裝置的螢幕可見高度。

device-width

定義輸出裝置的螢幕可見寬度。

grid

用來查詢輸出裝置是否使用柵格或點陣。

height

定義輸出裝置中的頁面可見區域高度。

max-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最大比率。

max-color

定義輸出裝置每一組彩色原件的最大個數。

max-color-index

定義在輸出裝置的彩色查詢表中的最大條目數。

max-device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最大比率。

max-device-height

定義輸出裝置的螢幕可見的最大高度。

max-device-width

定義輸出裝置的螢幕最大可見寬度。

max-height

定義輸出裝置中的頁面最大可見區域高度。

max-monochrome

定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。

max-resolution

定義裝置的最大解析度。

max-width

定義輸出裝置中的頁面最大可見區域寬度。

min-aspect-ratio

定義輸出裝置中的頁面可見區域寬度與高度的最小比率。

min-color

定義輸出裝置每一組彩色原件的最小個數。

min-color-index

定義在輸出裝置的彩色查詢表中的最小條目數。

min-device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最小比率。

min-device-width

定義輸出裝置的螢幕最小可見寬度。

min-device-height

定義輸出裝置的螢幕的最小可見高度。

min-height

定義輸出裝置中的頁面最小可見區域高度。

min-monochrome

定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數

min-resolution

定義裝置的最小解析度。

min-width

定義輸出裝置中的頁面最小可見區域寬度。

monochrome

定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置,則值等於0

orientation

定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。

resolution

定義裝置的解析度。如:96dpi, 300dpi, 118dpcm

scan

定義電視類裝置的掃瞄工序。

width

定義輸出裝置中的頁面可見區域寬度。

@media (device-height:568px) and (-webkit

-min

-device

-pixel

-ratio:2)

@media only screen and (max

-device

-width :480px)

@media only screen and (min

-device

-width :481px)

/*6*/

@media (min

-device

-width : 375px) and (max

-device

-width : 667px) and (-webkit

-min

-device

-pixel

-ratio : 2)

/*6+*/

@media (min

-device

-width : 414px) and (max

-device

-width : 736px) and (-webkit

-min

-device

-pixel

-ratio : 3)

/*魅族*/

@media only screen and (min

-device

-width :1080px) and (-webkit

-min

-device

-pixel

-ratio : 2.5)

/*mate7*/

@media only screen and (min

-device

-width :1080px) and (-webkit

-min

-device

-pixel

-ratio : 3)

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit

-device

-pixel

-ratio:2)

iOS字型根據不同螢幕尺寸適配

因為檢視使用storyboard 和 xib拖拽進來了,如果需要對不同大小的螢幕進行font 字型適配的話可以使用分類。在load 方法中 利用oc的執行時機制,對所有的 uibutton uilabel 做處理。關鍵 uibutton 按鈕的處理方式 void load id myinitwith...

Android 適配不同 解析度和尺寸

如題,最近做乙個裝置介面,為了能夠適應不同的解析度 下面分享實現方法 首先 你需要在 androidmanifest.xml 檔案的元素如下新增子元素 supports screens android largescreens true android normalscreens true andr...

Android不同螢幕尺寸多解析度適配

displaymetrics,isvalid true 首先看以上兩條資訊的內容,以第一條為例解釋下每個元素的意義 displayinfo real 1280 x 720 是指真實的螢幕解析度 50.0 fps 幀頻,即螢幕每秒重新整理次數 rotation 0 轉屏,0代表沒有旋轉 density...