time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】11、使用html5和CSS3 Media Queries完成跨浏览器的响应式设计

【HTML5实践教程】11、使用html5和CSS3 Media Queries完成跨浏览器的响应式设计

时间:2012-12-05 23:34 点击:2881次 字体:[ ]




   现在屏幕分辨率的范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大。用户也不只是使用台式电脑访问web站点了,他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值,已经不能满足需要了。web设计需要适应这种新要求,页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍,如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

  demo预览地址:http://webdesignerwall.com/demo/adaptive-design/final.html

  demo下载地址:http://www.webdesignerwall.com/file/adaptive-design-demo.zip

 

  第一次运行

  在开始之前,我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小,我们可以看到页面会根据视窗的大小自动调整布局。

【HTML5实践教程】11、使用html5和CSS3 Media Queries完成跨浏览器的响应式设计_www.fengfly.com

  更多例子

  你可以访问下面的地址,查看更多相关例子: WordPress themes。我设计了如下media queries: TisaEleminSucoiTheme2FunkiMinblr, 和 Wumblr

 

  概述

  默认情况下,页面容器的宽度是980px,这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度,如果小于980px他会变为窄屏显示模式,页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px,他会变为mobile显示模式,内容、侧边栏等内容会变为单独列布局方式,他们的宽度占满屏幕宽度。

【HTML5实践教程】11、使用html5和CSS3 Media Queries完成跨浏览器的响应式设计_www.fengfly.com

 



本文地址 : http://www.fengfly.com/plus/view-210743-1.html
标签: CSS3 HTML5 Media Queries
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: