首页 > 代码库 > 响应式布局（二）—— CSS3 Media Query

响应式布局（二）—— CSS3 Media Query

2024-08-25 05:18:12   217人阅读

响应式布局有三种实现方式：

  • CSS3 Media Query
  • 原生 JS 代码
  • 第三方开源框架（最常见的有 bootstrap）

 CSS3 -- Media Query

1. 媒体查询实现方式

方式一：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


联系
我们