all 所有**
screen 彩屏裝置
print 用於印表機和列印預覽
speech 應用於螢幕閱讀器等發聲裝置
and 並且
not 用來排除某種制定的**型別
only (限定某種裝置)某種特定的**型別
**特性
( width:600px ) 寬
( max-width:600px ) 最大寬度 <=600
( max-width:600px ) 最大寬度 =480
( orientation:portrait ) 豎屏
( orientation:landscape ) 橫屏
方式一@media [not|only] mediatype [and] (media feature)
方式二:
@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature);
需頂行寫
方式三:樣式引入 @media screen and (min-width:400px) and (max-width:500px) }
viewport視口
視口的作用:在移動瀏覽器中,當頁面寬度超 出裝置,瀏覽器內部虛擬的乙個頁面容器,將頁面容器縮放到裝置這麼大,然後展示
width [pixel_value | devicewidth] 例如width = 640
height [pixel_value | deviceheight]
initial-scale 初始比例 minimum-scale
允許縮放的最小比例 maximum-scale
允許縮放的最大比例
user-scalable 是否允許縮放 (yes || no 或 1 | 0)
相容edge 模式告訴 ie 以最高端模式渲染文件,也就是任何 ie 版本都以當前版本所支援的最高 級標準模式渲染,避免版本公升級造成的影響。簡單的說,就是什麼版本 ie 就用什麼版本的 標準模式渲染
使用以下**強制 ie 使用 chrome frame 渲染
最佳的相容模式方案,結合考慮以上兩種:
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先,什麼是響應式布局呢?響應式布局是2010年5月提出的乙個概念,簡單地說就是乙個 能夠相容多個終端,而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的,目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...