首頁  >  文章  >  web前端  >  使用css3響應式佈局設計回顧

使用css3響應式佈局設計回顧

高洛峰
高洛峰原創
2017-03-15 09:42:221296瀏覽

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

      all 用於所有裝置

      ##print

##      ##print

##      ##print# 用來列印設備#creen

creen##wy##crea##creen

creen##a>-#c生活

creen

creen##c生活」。 ,平板電腦,智慧型手機。

          speech 用於閱讀器等發聲設備

  關鍵字:#       and

運算子

##       and ##符號運算子
##       and ##符號運算子

滿足條件符合條件符合條件。


      @media screen and (max-width : 600px) {
         />    not關鍵字是用來排除某種制度的媒體類型。
      @media not print {
        /*匹配除了印表機以外的所有裝置*/
        媒體類型。       @media only screen and (min-width:300
) and (max-width:500){
      螢幕裝置*/

    }

  媒體特性:(常用的)    

#    max-width(max-

#    max-width(

max-
#    max-width(##max-height
): 最大寬度和最大寬度
#      @media (max-width: 600px) {                      #min-height) : 最小寬度和高度
      @media (min-width : 400px) { 
                      聚(max-device-height) 裝置的最大寬度和高度
@media (max-device-width: 800px) { 
        匹配設備(不是界面)寬度小於800px的設備
      腳、、]的最大寬度和高度
      @media (min-device-width: 600px) { 
        匹配裝置(不是介面)寬度大於600     匹配裝置(不是介面)寬度大於600      orientation: portrait 垂直畫面
            href="indexa.| orientation:landscape 橫螢幕
           結果: 在橫螢幕下顯示這樣式

以上是使用css3響應式佈局設計回顧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn