關於CSS3中Media Queries使用方法

2021-06-28 00:04:13 字數 985 閱讀 8250

media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果

@media **型別and （**特性）
「max-width」是**特性中最常用的乙個特性，其意思是指**型別小於或等於指定的寬度時，樣式生效。如：

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


}
上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。

「min-width」與「max-width」相反，指的是**型別大於或等於指定寬度時，樣式生效。

@media screen and (min-width:900px)
當螢幕在600px~900px之間時，body的背景色渲染為「#f5f5f5」，如下所示。

@media screen and (min-width:600px) and (max-width:900px)


}
在智慧型裝置上，例如iphone、ipad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者呼叫相應的樣式檔案）。同樣的，對於螢幕裝置同樣可以使用「min/max」對應引數，如「min-device-width」或者「max-device-width」。

上面的**指的是「iphone.css」樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，這裡的「max-device-width」所指的是裝置的實際解析度，也就是指可視面積解析度。

@media not print and (max-width: 1200px)

上面**表示的是：樣式**將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。

CSS3關於轉換

旋轉 rotate 旋轉xyz軸 正順時針負逆時針，單值預設z，3d 1，1，1，25deg 三面合力各做25deg形成的向量力。平移 translate 沒有脫離文件流，百分比相對於自身的寬高，旋轉平移先後區別，會有不同的效果。縮放 scale 縮放單值預設同時應用xy軸，z軸是厚度，3d是集合顯...

關於css3中nth of type 的使用

nth of type n 選擇器用於匹配同型別中的第n個同級兄弟元素。n可以是乙個數字，乙個關鍵字，或者乙個公式。ps n不能為判斷語句 p nth of type n 2 錯誤，不能為賦值語句 p nth of type n 2 錯誤，不能為布林型 p nth of type 2 正確，選取第二...

關於 CSS3 中的 filter 濾鏡 屬性

filter屬性定義了元素 通常是 的可視效果 例如 模糊與飽和度 css語法 filter none blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia url 提示 若想在...