css3mediaqueriesjs的簡單介紹

本文目錄一覽：

• 1、css3-mediaqueries不起作用，怎麼用啊？
• 2、低版本 IE 支持 CSS3 最佳途徑是用 css3-mediaqueries，js 嗎
• 3、如何使用CSS3 Media Queries技術創建wap網站

css3-mediaqueries不起作用，怎麼用啊？

!–[if lt IE 9]

script src=””/script

![endif]–

就這樣，沒問題啊

低版本 IE 支持 CSS3 最佳途徑是用 css3-mediaqueries，js 嗎

htmlshiv.js

Remy的 HTML5shiv通過JavaScript 來創建HTML5元素(如 main, header, footer等)。在某種程度上通過JavaScript 創建的元素是 styleable(可樣式)的。我們可以花很多時間來思考其運行原理，但誰會在乎呢?這種策略在所有產品網站上仍然是必須使用的。

selectivizr.js

Selectivizr.js 是一個不可思議的資源，用於填充不支持的CSS選擇器和屬性,包括重要的 last-child。在最近的重設計中，我嵌入了 selectivizr，並在更老的 IE 瀏覽器上也不會錯過任何細節。下面是我的實現代碼:

現代項目絕對必須的。只在老版本IE時才加載。

另外，Modernizr 腳本中已經添加 HTML5 瀏覽器支持腳本 html5shiv，我們只要引用 Moernizr.js 文件，IE9 以下的 IE 瀏覽器就支持 HTML5 添加的語義標籤如 nav、section、article 等，也可以使用 CSS 對它們進行樣式化。

條件注釋

下面這樣最土的情況你肯定看到過。但無論醜陋與否，事實上這段代碼完全按預期的方式運行：

—

上面的方法是作用於css，來寫一些針對IE各版本的樣式差異。先判斷用戶用的哪個IE版本，然後在標籤上加上該版本的class，這樣可以方便hack。

然後我們在css文件中就可以這樣寫：

.ie6 xxx {};.ie7 xxx {};

如何使用CSS3 Media Queries技術創建wap網站

Media Queries

如果你曾經創建過網站的打印樣式，那麼你應該知道可以通過設置css2的media type為print去實現打印，下面是兩個關於media type的簡單應用

//example1

≪link rel=”stylesheet” type=”text/css” media=”screen” href=”sans-serif.css”

≪link rel=”stylesheet” type=”text/css” media=”print” href=”serif.css”

//example2

@media screen { * { font-family: sans-serif } }

而打印功能或者正是你所知道的關於media type的所有用法，由於僅僅是對於打印設備的支持，所以我們很少可以在樣式文件中看到media type也就不足為奇了。手持設備的流行和css2 media type的局限性使得人們在css3中定義了Media Queries，它是media type的一種延伸，不過相對於前輩，它的功能強大多了，除了可以為不同的設備選擇一種適當的類型之外，它可以檢查所有的事情，包括：

瀏覽器窗口的高度和寬度

設備的高度和寬度

方向，例如iphone手機是橫向還是縱向

分辨率

也就是說，如果用戶的瀏覽器支持css3 Media Queries，那麼我們就可以專門為某些情況編寫相關的css，例如：如果檢測到用戶使用了像iphone或者ipad這樣的設備，那麼將可以為它們呈現一個特定的布局。

使用Media Queries為智能手機或者平板電腦增加相應樣式

我們可以為智能手機或者平板電腦的布局樣式增加相應的css代碼，如果你整站都是使用一個樣式文件的話，則可以通過在樣式文件增加以下語法格式的css代碼：

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

//在這裡填寫專門為小屏幕設備設置的樣式，例如不同的寬度、高度，不同尺寸的圖片等等

}

引用一個單獨的Media Queries樣式文件

除了修改原有的樣式文件來實現對智能手機的支持外，我們還可以將Media Queries樣式單獨保存為一個獨立的文件，然後在頁面引用則可。

≪link rel=”stylesheet” type=”text/css”

media=”only screen and (max-device-width: 480px)”

href=”small-device.css” /測試media queries

改造完後，我們需要測試，看一下media queries是否生效。如果你自己擁有一台iphone或者android手機，那麼只需要用該設備訪問要測試的網站就可以了，但如果沒有這些設備的話，那怎麼辦？我將隆重為你介紹一個非常優秀的模擬media queries測試網站：protofluid，只需要訪問該網站，然後設置模擬設備（包括手機、平板、顯示器、電視等，而每一種設備都對應有不同的產品可供選擇），最後輸入要訪問的網站鏈接（包括本地的鏈接）回車後就可以看到實際效果了。