css3響應式布局設計——回顧，css3響應布局

css3響應式布局設計——回顧，css3響應布局

響應式設計是在不同裝置下解析度不同顯示的樣式就不同。
　　media 屬性用於為不同的媒體類型規定不同的樣式。根絕瀏覽器的寬度和高度重新渲染頁面。
　　　　文法： @media mediatype and | not | only (media feature) {}
　　　　樣本：
　　　　　　<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
　　　　結果： 解析度在大到600的時候 顯示這個樣式表裡面的樣式。

　　媒體類型：

　　　　　　all 用於所有裝置

　　　　　　print 用於印表機和列印裝置　　　　　　

　　　　　　screen 用於電腦螢幕，平板電腦，智能手機。

　　　　      speech 用於閱讀器等發聲裝置

　　關鍵字：

　　　　   and 運算子用於符號兩邊規則均滿足條件則匹配。

　　　　　　@media screen and (max-width : 600px) {
　　　　　　　　　　/*匹配寬度小於600px的電腦螢幕*/
　　　　　　}

　　　　not關鍵字是用來排除某種制度的媒體類型。
　　　　　　@media not print {
　　　　　　　　/*匹配除了印表機以外的所有裝置*/
　　　　　　}
　　　　only 用來定某種特定的媒體類型。
　　　　　　@media only screen and (min-width:300) and (max-width:500){
　　　　　　　　/*這段是只(only)針對彩色螢幕裝置*/
　　　　}

　　媒體特性： （常用的）　　　　

　　　　max-width(max-height): 最大寬度和最大高度

　　　　　　@media (max-width: 600px) {
　　　　　　　　匹配介面寬度小於600px的裝置
　　　　　　}
　　　　min-width(min-height) : 最小寬度和高度
　　　　　　@media (min-width : 400px) {
　　　　　　　　匹配介面寬度大於400px的裝置
　　　　　　}
　　　　max-device-width(max-device-height) 裝置的最大寬度和高度
　　　　　　@media (max-device-width: 800px) {
　　　　　　　　匹配裝置(不是介面)寬度小於800px的裝置
　　　　　　}
　　　　min-device-width(min-device-height):  裝置的最大寬度和高度
　　　　　　@media (min-device-width: 600px) {
　　　　　　　　匹配裝置(不是介面)寬度大於600px的裝置
　　　　　　}
　　　　orientation: portrait 豎屏
　　　　　　<link rel="stylesheet" media="all and
　　　　　　　　(orientation:portrait)"
　　　　　　href="indexa.css"/>
　　　　　結果: 在豎屏下顯示這樣式
　　　　orientation:landscape 橫屏
　　　　　　<link rel="stylesheet" media="all and
　　　　　　　　(orientation:landscape)"
　　　　　　　　　　href="indexa.css"/>
　　　　　結果: 在橫屏下顯示這樣式