响应式布局之二 CSS3 Media Query-优快云博客

本文深入解析响应式布局的三种实现方式：CSS3MediaQuery、原生JS代码及第三方开源框架如Bootstrap。详细介绍了CSS3MediaQuery的媒体查询实现方式，包括styleSheet样式表和link标签的使用方法，以及max-width、min-width等属性的区别。同时，文章提供了关于设备兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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)

转载于:https://www.cnblogs.com/CaseyWei/p/9508977.html