如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过html5和css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案。
我们需要在页面中调用css3-mediaqueries.js文件,来帮助IE8或是之前的版本支持CSS3 media queries:
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->接下来,我们要创建css样式表,并在页面中调用:
<link href="media-queries.css" rel="stylesheet" type="text/css">弹性图片
img {max-width:100%;height:auto;width:auto9; /* ie8 */}弹性内嵌元素(视频)
.video embed,.video object,.video iframe {width: 100%;height: auto;}字号自动调整的问题(通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整)
html{-webkit-text-size-adjust:none;}页面宽度缩放的问题
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
- 浏览: 260514 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
相关推荐
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,...
NULL 博文链接:https://axl234.iteye.com/blog/1833406
[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版
接下来,我们将了解一下怎样通过HTML5和CSS3MediaQueries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时...
移动互联网时代到来了 本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来。 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术 不仅讨论了媒体查询 流式。
响应式web设计 html css javascript 图灵设计丛书。。
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1880369
响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版
《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂,能够...
《响应式WEB设计:HTML5和CSS3实践指南》┊Benjamin Lagrone。带书签高清完整PDF,仅供学习参考!
资源名称:响应式Web设计 HTML5和CSS3实战 第2版内容简介:本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论...
关于网页布局的设计, HTML 响应式 Web 设计,响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或Javascript脚本。
响应式Web设计 HTML5和CSS3实战第二版,带有目录,非常清晰的版本。
响应式web设计html5和css3实战 源代码 绝对一手!
响应式web设计-HTML5和CSS3实战,越来越多的网站开始使用响应式设计,此书可以帮助你更好的学习它。
响应式,web设计html5+css3 pdf和源码资源