CSS3 Media Query CSS3媒介查詢

2021-09-01 16:32:15 字數 962 閱讀 3258

通過min-width的設定,我們可以在瀏覽器視窗或裝置螢幕寬度高於這個值的情況下,為頁面指定乙個特定的樣式表;max-width則反之

如下面**:

有些時候,我們希望通過media queries作用於某種特定的裝置,而忽略其上執行的瀏覽器是否由於沒有最大化而在尺寸上與裝置螢幕尺寸產生不一致的情況。這時,我們需要使用min-device-width與max-device-width,用來判斷裝置本身的螢幕尺寸。

**如下:

@media screen and (max-device-width: 480px)   

} @media screen and (min-device-width: 768px)

}

iphone4上面的樣式是專門針對iphone4的移動裝置寫的。

ipad

在大數情況下,移動裝置ipad上的safari和在iphone上的是相同的,只是他們不同之處是ipad宣告了不同的方向,比如說 上面的例子,在縱向(portrait)時採用portrait.css來渲染頁面;

在橫向(landscape)時採用landscape.css來渲 染頁面。

android

/*240px的寬度*/

/*360px的寬度*/

/*480px的寬度*/

我們可以使用media query為android手機在不同解析度提供特定樣式,這樣就可以解決螢幕解析度的不同給android手機的頁面重構問題。

CSS3 CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到...

css3 css的3種引入方式

你好!這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章,了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...