//列印和螢幕顯示不同的字型和字型大小。
@media screen
}@media print
}@media screen,print
//螢幕大於600px小於900px的視窗應該應用的樣式
@media screen and (min-width: 600px) and (max-width: 900px)
}//判斷螢幕方向orientation和螢幕的縱橫比device-aspect-ratio
膝上型電腦：
台式電腦
小螢幕手機：320畫素以下
大屏手機：320px~768px
平板電腦：768~1024px
pc：1024及以上
響應式設計需要考慮轉屏：
rel="stylesheet"
href="portrait.css"
media="screen and (orientation:portrait)"/>
rel="stylesheet"
href="landscape.css"
media="screen and (orientation:landscape)"/>
window.addeventlistener('orientationchange', function
(obj) );
只有簡單頁面才會手寫媒介查詢，複雜頁面往往會採用各種響應式的框架來簡化和規範開發
"viewpot" content="width=device-width,initial-scale=1.0"/>
content="yes"/>
content="yes"/>
name="format-detection"
content="telephone=no"/>
使用media-queries.js或者respond.js讓ie 9以下的支援響應式設計
簡單的響應式導航欄。
@media screen and (max-width:320px)
.header
li }@media screen and (min-width:320px) and (max-width:765px)
.header
li}@media screen and (min-width:765px)
.headerli}
不存在浮動元素脫離正常文件流後需要在某些地方清除浮動的問題
浮動布局存在載入順序問題
彈性盒子首先對父元素宣告：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
//對盒子元素設定比例
-webkit-box-flex: 1; /* old - ios 6-, safari 3.1-6 */
-moz-box-flex: 1; /* old - firefox 19- */
-webkit-flex: 1; /* chrome */
-ms-flex: 1; /* ie 10 */
flex: 1;
//設定盒子排列的方向是橫向
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
css 響應式（媒介查詢）
我們只需用到width衍生出的max width這個屬性，定義輸出裝置中的頁面可見區域寬度來控制該改變的樣式即可。html 如下 頭部 左部中部 右部 底部 demo01.css樣式如下 body header container clearfix after footer left center ...
CSS（4） 文字布局
文字 可以控制字型，文字大小，文字顏色，文字粗細，斜體，下 中 頂劃線。text transform 首字母或全部首字母大寫.font family 控制字形，見另一blog font size 控制字型 例如 p.f12 text decoration 實現underline 下劃線 overli...
css4種布局技巧 position
position static relative absolute fixed inherit absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相對定位 文件流的布局...