文章出處

viewport設置適應移動設備屏幕大小 

viewport：允許開發者創建一個虛擬窗口并自定義其窗口的大小或縮放功能

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

代碼中的content屬性可以設置如下6種不同參數

Media Queries如何工作

1、定義當前屏幕可視區域的寬度最大值是600像素

<link href="small.css" rel="stylesheet"  media="screen and(max-width:600px)"/>

那么small.css怎樣寫的呢

@media screen and (max-width:600px) {
    .demo {
        background-color:red;
    }
}

2、定義當前屏幕可視區域的寬度長度在600到900像素之間

<link href="small.css" rel="stylesheet"  media="screen and(min-width:600px) and(max-width:900px)"/>
@media screen and (min-width:600px) and (max-width:900px) {
    .demo {
        background-color: red;
    }
}

3、當移動屏幕處于縱向（portrait）模式下時，應用portrait樣式文件，當移動設備處于橫向（landscape）模式下，應用landscape樣式文件

    <link href="protrait.css" rel="stylesheet"  media="all and(orientation:portrait)"/>
    <link href="landscape.css" rel="stylesheet"  media="all and(orientation:landscape)"/>

 

Media Queries語法總結

語法格式如下圖所示：

1、使用Media Queries樣式模塊時都必須以“@media”方式開頭

2、media_query表示查詢關鍵定，比如說not only and 等等

  • 　　not表示對后面的樣式表達式執行取反操作
  • 　　only讓不支持Media Queries的設備但能讀取Media Type類型的瀏覽器忽略這個樣式，對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的瀏覽器會忽略only關鍵字并直接根據頁面的表達式應用樣式 文件

3、media_type 指定設備類型（也稱媒體類型）

4、media_feature定義css中的設備特征　　

media_type設備類型一覽表

media_feature設備特征一覽表

大部分設備特征都允許接受min/max的前綴


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄