使用 @media 查詢,你可以針對不同的**型別定義不同的樣式。
@media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,@media 是非常有用的。
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
@media mediatype and|not|only (media feature)
值
描述all
用於所有裝置
aural
已廢棄。用於語音和聲音合成器
braille
已廢棄。 應用於盲文觸控式反饋裝置
embossed
已廢棄。 用於列印的盲人印刷裝置
handheld
已廢棄。 用於掌上裝置或更小的裝置,如pda和小型**
用於印表機和列印預覽
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...