響應式布局（二）—— CSS3 Media Query

標籤：span   bsp   ie6   方案   架構   font   判斷   解決   寫法   

響應式布局有三種實現方式：

• CSS3 Media Query
• 原生 JS 代碼
• 第三方開源架構（最常見的有 bootstrap）

 CSS3 -- Media Query1. 媒體查詢實現方式

方式一：styleSheet樣式表中的寫法：

如：<style>標籤中使用@media

    <style>        @media screen and (min-width: 480px) {            body{background: blue;}        }    </style>

方式二：<link>標籤中使用@media

<link type="text/css" rel="stylesheet" href="xxx.css" media="only screen and (max-width:480px)" />

2. 辨析

max-width   min-width                                   瀏覽器寬度進行判斷。PC端瀏覽器視窗可調節，可用這個屬性來實現自適應

max-device-width   min-device-width           對裝置的最大寬度和最小寬度進行判斷。指的是裝置物理寬度

3. CSS3 Media Query 常見屬性

device-width,  device-height      螢幕寬高

width,  height     渲染視窗寬高(瀏覽器寬高)

orientation      裝置方向

resolution       裝置解析度

4. 相容性

IE6-8 不支援CSS3，所以不支援CSS3 Media Query

解決辦法：Respond.js  (詳見bootstrap裝置相容性解決方案 http://getbootstrap.com/getting-started/#support)

 

響應式布局（二）—— CSS3 Media Query