響應式布局 ：網頁相容多個終端，使用者體驗
media query **查詢：響應布局的一種方式
全程百分比布局
語法：@meidia mediatype and|not|only (media feature){
css-code;
@media 定義**查詢
mediatype ：all所有裝置；print印表機；screen電腦螢幕，平板電腦，智慧型手機
speech 螢幕閱讀器等發聲裝置
media feacure: max:小於或等於；min:大於或等於
css檔案下定義：**查詢檔案
多列布局：multi-column 多種 ；列
屬性：column-count:3 分幾列
column-gap:50px 列間距
column-rule:寬度 樣式 顏色 列分割線的樣式
寬度：thin 細 medium 中等 thick 粗
樣式：hidden 隱藏； dotted 點狀； dashed 虛線； solid 實現； double 雙線
column-span:all 指定元素要垮多少列
box-sizing 任意指定 盒模型 標準盒模型：w3c 怪異盒模型：ie
content-box標準
border-box怪異
繪製特殊圖形
三角：寬高為0，border屬性
其他隱藏：transparent
梯形:寬100px border屬性
三邊隱藏：transparent
橢圓：border-radius:100%
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...