用於解決pc頁面能在手機上正常顯示，不會因螢幕變小而擠壓布局導致頁面排版混亂的問題。
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
>
@media可以根據不同的**型別定義不同的樣式。
就是針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
五：@media使用
它有兩種使用方式：
直接在link中使用，通過media判斷尺寸的大小在引入不同css檔案
rel=
"stylesheet"
media
="mediatype and|not|only (media feature)"
href
="mystylesheet.css"
>
@media mediatype and|not|only (media feature)還有許多已廢除
and，only和not三個關鍵字：
not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）
only：only用來定某種特別的**型別
and：定義**的寬度區間
rel=
"stylesheet"
type
="text/css"
media
="screen and (max-width:1200px)"
href
="style.css"
>
rel=
"stylesheet"
type
="text/css"
media
="screen and (max-width:960px) and (min-width:1200px)"
href
="style.css"
>
@media screen and ( max-width: 768px )
}
@media screen and ( min-width: 768px ) and （max-width: 992px）
}
@media screen and ( min-width: 992px )
}
補充：還有乙個等於（其它的特性不在寫了）
@media screen and (max-device-width:960px)
}
橫屏：@media screen and (orientation: portrait) and (max-width: 720px)
豎屏：@media screen and (orientation: landscape)
注意：這些有css3和html5中特性，存在一定的相容問題，處理如下
引入相容js檔案
現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8:
為了防止這種情況，我們需要下面這段**來讓ie的文件模式永遠都是最新的：
（如果想使用固定的ie版本，可寫成：http-equiv
="x-ua-compatible"
content
="ie=emulateie9"
>
）不過我最近又發現了乙個更給力的寫法：
怎麼這段**後面加了乙個chrome=1，這個google chrome frame（谷歌內嵌瀏覽器框架gcf），如果有的使用者電腦裡面裝了這個chrome的外掛程式，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，無比給力，不過如果使用者沒裝這個外掛程式，那這段**就會讓ie以最高的文件模式展現效果。這段**我還是建議你們用上，不過不用也是可以的。
流式布局和viewport
百分比布局，非固定寬度，內容向兩邊填充，流動的布局。pc端的網頁在手機端的瀏覽器顯示是不會出現網頁的，這是因為移動端的網頁不是直接放在移動端的瀏覽器中，而是放在移動端的乙個虛擬區域中，這個虛擬區域叫做viewport 視覺視窗,視口，視口的寬度一般預設比瀏覽器寬度大 然後視口進行相應的縮放，最後將視...
WPF常用布局容器和常用布局屬性
grid為wpf重最常用的布局容器，作為view中的主要組成部分，負責框架中整體的頁面布局。showgridlines 可以設定行業的邊距線的顯示。grid.rowdefinitions 可以建立任意行，進行固定高度與百分比活自適應高度設定。grid.columndefinitions 可以建立任意...
DIV和CSS常用布局
1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...