响应式布局(二)—— CSS3 Media Query

响应式布局详解
本文介绍了响应式布局的三种实现方式:CSS3 Media Query、原生JS代码及第三方框架(如Bootstrap)。重点讲解了CSS3 Media Query的具体应用方法,包括媒体查询的两种实现方式及其常见属性,并说明了兼容性问题。

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

  • 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/yinshuige/p/6108092.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值