解析mysqldump的delay-insert選項。本站提示廣大學習愛好者：（解析mysqldump的delay-insert選項）文章只能為提供參考，不一定能成為您想要的結果。以下是解析mysqldump的delay-insert選項正文
media type(媒體類型)是css 2中的一個異常有效的屬性，經由過程media type我們可以對分歧的裝備指定特定的款式，從而完成更豐碩的界面。media query(媒體查詢)是對media type的一種加強，是CSS 3的主要內容之一。跟著挪動互聯網的成長，media query開端獲得年夜家的看重。
media type
讓我們先懂得一下media type，其實這個年夜家會比擬熟習一點，我們平日會用到的media type會是all 和screen，然後是print，一些網站會專門經由過程print類型為頁面的打印格局供給更友愛的界面。
其實，media type有許多種：
類型 |
說明 |
all
一切裝備
braille
盲文
embossed
盲文打印
handheld
手持裝備
print
文檔打印或打印預覽形式
projection
項目演示，好比幻燈
screen
黑色電腦屏幕
speech
演講
tty
固定字母間距的網格的媒體，好比電傳打字機
tv
電視
media type的幾種應用辦法
我們可以經由過程幾種辦法來聲明media type：
辦法一
<link href="style.css" media="screen print" ...
辦法二
<?xml-stylesheet media="screen" href="style.css"...
辦法三
@import url("style.css") screen;
辦法四
<style media="screen">
@import url("style.css");
</style>
辦法五
@media screen{
selector{rules}
}
固然，這幾種辦法各有益弊，而我們經常使用的是第一種和最初一種辦法。
media type的閱讀器支撐
IE5.5/6/7不支撐在@import中應用媒體類型
Safari/firefox只支撐all,screen,print三品種型(包含iphone)
Opera 完整支撐
Opera mini 支撐handheld，未指定章應用screen
Windows Mobile體系中的IE支撐handheld，其它支撐不明…
media query
正如前文所說，media query是CSS 3對media type的加強，現實上我們可以將media query算作是media type+css屬性斷定。
請留意，上面提到的一些症結字等外容，有些是在media type中便可用的，然則放到media query中將能更好的施展其感化，所以我就在恰當的處所引入。
css屬性斷定可以只是某個CSS屬性的稱號，也能夠是屬性+值：
<link rel="stylesheet" media="screen and (animation)” herf=“…”
假如裝備支撐CSS動畫，那末就可以履行這個內部款式表文件。
@media screen and (max-width:240px){
body{font-size:medium;}
}
假如裝備的閱讀器的最年夜寬度是240px，則頁面將應用中號字體。
PS:屬性和值之間是用冒號銜接的，而不是等號，這與正常的CSS的寫法分歧。
媒體查詢語句構造
我們可以將上述語句稱為媒體查詢語句，如許也更能懂得一些。從下面的例子也能夠看出，媒體查詢語句普通由media type+一到多個CSS屬性斷定構成，而多個CSS屬性斷定可以用症結字and銜接：
@media screen and (min-width:1024px) and (max-width:1280px){
body{font-size:medium;}
}
個中media type可以省略，屬性值也能夠為空：
@media (color:4){}
@media (color){}
固然，請留意，有屬性值和沒有屬性值的情形代表的意義是紛歧樣的，所以下面的這兩條規矩不是等價的。
而針對多個媒體類型的CSS規矩，可以用逗號來離隔：
@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}
@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}
media query支撐的屬性
現實上，media query支撐的屬性和我們經常使用的CSS屬性是不太一樣的，它們是一些特殊界說的條目：
屬性 |
值 |
Min/Max |
描寫 |
color
整數
yes
每種顏色的字節數
color-index
整數
yes
顏色表中的顏色數
device-aspect-ratio
整數/整數
yes
寬高比例
device-height
length
yes
裝備屏幕的輸入高度
device-width
length
yes
裝備屏幕的輸入寬度
grid
整數
no
能否是基於格柵的裝備
height
length
yes
襯著界面的高度
monochrome
整數
yes
單色幀緩沖器中每像素字節
resolution
分辯率(“dpi/dpcm”)
yes
分辯率
scan
Progressive interlaced
no
tv媒體類型的掃描方法
width
length
yes
襯著界面的寬度
orientation
Portrait/landscape
no
橫屏或豎屏
從這些屬性中我們可以看出，media query就是為了更好的適配各類裝備而生的。
閱讀器擴大
webkit
webkit是最早完成media query支撐的閱讀器內核之一，同時它也依據本身的須要弄了一些獨有的擴大屬性，最經常使用的有：
transform-2d
只用於支撐應用 -webkit-transform完成2D變換的閱讀器
transform-3d
只用於支撐應用 -webkit-transform完成3D變換的閱讀器
transition
只用於支撐應用-webkit-transition完成變換後果的閱讀器
animation
只用於支撐應用-webkit-animation完成動畫的閱讀器
概況請看這裡：http://webkit.org/specs/MediaQueriesExtensions.html
firefox
firefox也供給一些本身的擴大，不外因為firefox閱讀器的手機版如今還很弱，所以很少會用到，感興致的同窗可以到https://developer.mozilla.org/En/CSS/Media_queries查閱。
max與min
仔細的同窗能夠曾經留意到後面用到的這兩個症結詞，他們是要合營支撐它們的屬性應用的，它們的意義與我們經常使用的max-width和minwidth等相似。
各屬性對max和min的支撐在後面的屬性列表中有給出，這裡是一個具體的列表：
height
min-height
max-height
device-width
min-device-width
max-device-width
device-height
min-device-height
max-device-height
aspect-ratio
min-aspect-ratio
max-aspect-ratio
device-aspect-ratio
min-device-aspect-ratio
max-device-aspect-ratio
color
min-color
max-color
color-index
min-color-index
max-color-index
Monochrome
min-monochrome
max-monochrome
Resolution
min-resolution
max-resolution
not/only
媒體類型還支撐 not和only症結字，它們可以用來更便利的定位某個媒體裝備：
not：消除某種制訂的媒體類型
@media not print and (color){
}
only：指定某種特定的媒體類型，可以用來消除不支撐媒體查詢的閱讀器：
@media only screen and (color){
}
media query的閱讀器支撐：
IE 9以下不支撐
Firefox 3.5+(Gecko 1.9.1+)支撐
Opera 9.5+完整支撐
Opera mini 5支撐
webkit 支撐年夜部門屬性(safari 3.0的內核版本是522，iPhone 1代的safari的內核版本是524，webkit年夜概從這個時刻開端支撐media query，然則對部門屬性好比projection支撐欠好)
iPhone OS 3.2之前的版本不支撐orientation屬性，iPad和iPhone 4支撐該屬性。
iPhone Safari不支撐orientation(iPhone 4支撐)
實例：
如今讓我們來看一些典范的例子：
檢測iPhone safari：
<link media="only screen and (max-device-width: 480px)" href="style.css">
這是apple官方網站推舉的一種定位iPhone safari閱讀器的辦法，在iPhone一代和2代的時期，這條規矩切實其實可以或許准確的斷定出iPhone的閱讀器，然則後來湧現了Android的年夜屏幕手機，好比Nexus One和HTC desire，這條規矩也能適配這些480px寬度的機械。
Google的iPhone橫屏款式：
Google之前經由過程以下方法為iPhone手機供給橫屏款式(由於最早的3代iPhone手機不支撐orientation屬性)：
@media screen and (max-height:300px){
#linksDiv{
margin-top:10px;
}
...
}
android手機的多分辯率成績：
android體系的開放性招致其終真個多樣性，那末關於各類各樣的android手機來講，屏幕分辯率的差別招致針對android手機的頁面重構龐雜性增長，那末我們可以用media query為每種分辯率供給特定款式：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{
}
}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
selector{
}
}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
selector{
}
}
device-aspect-ratio
device-aspect-ratio可以用來適配特定屏幕長寬比的裝備，這也是一個很有效的屬性，好比，我們的頁面想要對長寬比為4:3的通俗屏幕界說一種款式，然後關於16:9和16:10的寬屏，界說另外一種款式，好比自順應寬度和固定寬度：
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
}
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}
固然，關於手機也能夠應用這個屬性，好比關於480px*800px的Nexus One和Desire等手機，可以用上面的款式來婚配：
/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
selector{
}
}
O’Reilly辨別iPhone和iPad的辦法
O’Reilly為其網站制造了針對iPad和iPhone裝備的分歧版本，從而供給最合適相干裝備浏覽的界面，他們的做法就是應用media query：
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
總結
CSS 3的media query是一個很壯大也很好用的對象，它為我們在分歧的裝備和情況下完成豐碩的界面供給了一種快捷辦法，固然如今各個閱讀器對它的支撐還有些差別，然則年夜家都在改良，IE 9曾經開端支撐media query了。不外今朝media query的最年夜舞台是在高端手持裝備，信任跟著挪動互聯網的疾速成長，media query也會很好施展本身的感化。
