响应式布局之CSS3 Media Queries

admin查看全部>> 04-19

人气 1,130

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

文章目录
[隐藏]

提到响应式web设计,不得不提到CSS3的Media Queries,CSS3 Media Queries工作原理主要是通过不同条件引用不同的样式效果,从而达到不同分辨率的显示效果。

Media Queries如何使用?

我们先看一个实例,请改变浏览器大小看不同的效果。[注意,IE8及以下版本不支持此效果,请使用火狐,谷歌等浏览器查看。]
第一种:直接在link中判断设备的尺寸,然后引用不同的css文件,

上面提到media属性,下面顺便提下css2中的media属性

HTML <link> 标签的 media 属性

描述
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

引用方式:

第二种:直接写在样式表里面,

相关参数:
Max Width 小于某个宽度时候应用
下面的样式指可视区域小于600像素应用。

Min Width 大于某个宽度时候应用
下面的样式指可视区域大于900像素应用。

Multiple Media Queries 在某个条件范围内应用
下面的样式指在可视区域的宽度在600px和900px之间的时候被应用。

Device Width 满足设备宽度执行
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

For iPhone 4
下面的样式专门为iphone4写的

For iPad
你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse)

值得注意的是:

最后还需要在页面头部之间添加如下代码:

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:

附:CSS3 Media Queries 浏览器兼容性表(图片来源于网络)
CSS3 Media Queries 浏览器兼容性表

在线预览DEMO下载网盘下载

相关作品
响应式布局之CSS3 Media Queries:等您坐沙发呢!



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆