viewport和@media查詢

一：什麼是Viewport?

1. viewport 是用戶網頁的可視區域。

2. viewport中文翻譯爲「視區」

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

二：Viewport的做用

用於解決PC頁面能在手機上正常顯示，不會因屏幕變小而擠壓佈局致使頁面排版混亂的問題。

三：設置Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋：

• width：控制 viewport 的大小，能夠指定的一個值，如 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。

• height：和 width 相對應，指定高度。

• initial-scale：初始的縮放比例（默認設置爲1.0）  

• minimum-scale：容許用戶縮放到的最小比例（默認設置爲1.0）

• maximum-scale：容許用戶縮放到的最大比例（默認設置爲1.0）   

• user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面。no時 minimum-scale 與 maximum-scale 能夠不用寫） 

四：什麼是@media

@media能夠根據不一樣的媒體類型定義不一樣的樣式。

就是針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。

 

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

五：@media使用

它有兩種使用方式：

1. 直接在link中使用，經過media判斷尺寸的大小在引入不一樣css文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

2. 直接在<style>標籤裏面設置

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype媒體類型有：

all　　用於全部設備

print　　用於打印機和打印預覽

screen　　用與電腦屏幕，平板電腦，智能手機等（最經常使用的）

還有許多已廢除

and，only和not三個關鍵字：

not: not是用來排除掉某些特定的設備的，好比 @media not print（非打印設備）

only：only用來定某種特別的媒體類型

and：定義媒體的寬度區間

案例寫法：

第一種方式寫法

<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="style.css">

 

當屏幕的寬度大於1200px時，應用style.css

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px) and (min-width:1200px)" href="style.css">

當屏幕的寬度大於992px，小於1200px時，應用style.css

第二種方式寫法

@media screen and ( max-width: 768px ){

　　　　body{

　　　　　　background: blue;

　　　　}　　

}

當屏幕小於768px時，用此css樣式

@media screen and ( min-width: 768px ) and （max-width: 992px）{

　　　　body{

　　　　　　background: red;

　　　　}　　

}

 當屏幕大於768px時，小於992px時，用此css樣式

@media screen and ( min-width: 992px ){

　　　　body{

　　　　　　background: yellow;

　　　　}　　

}

當屏幕小於992px時，用此css樣式

 補充：還有一個等於（其它的特性不在寫了）

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

　　　　body{

　　　　　　background: yellow;

　　　　}　　

}

當等於960px時，用此css樣式

橫屏：@media screen and (orientation: portrait) and (max-width: 720px) { 對應樣式 }  

豎屏：@media screen and (orientation: landscape) { 對應樣式 } 

 

注意：這些有CSS3和HTML5中特性，存在必定的兼容問題，處理以下

引入兼容JS文件

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

設置IE渲染方式默認爲最高(這部分能夠選擇添加也能夠不添加)

如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8:

爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔模式永遠都是最新的：

1. <meta http-equiv="X-UA-Compatible" content="IE=edge">

 （若是想使用固定的IE版本，可寫成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）

 

不過我最近又發現了一個更給力的寫法：

1. <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎麼這段代碼後面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），若是有的用戶電腦裏面裝了這個chrome的插件，就可讓電腦裏面的IE不論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過若是用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展示效果。這段代碼我仍是建議大家用上，不過不用也是能夠的。

參考與引用：http://blog.csdn.net/inuyasha1121/article/details/50777116