響應式布局

2021-08-21 17:57:21 字數 1090 閱讀 7088

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 | device­width] 例如width = 640

height [pixel_value | device­height]

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.能夠方便的解決多裝置...