HTML5移动Web开发

1. 响应式web设计

（1）.媒体查询初探   通过media属性为样式表指定了设备类型

<link rel="stylesheet" media="screen" href="style.css" />

CSS3  增加当设备纵向放置的时候才匹配的条件

<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />

CSS3  增加当设备屏幕大雨960px才会加载style.css样式文件的条件

<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />

参考CSS3媒体查询：http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询

- width 视口宽度
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
- orientation 检测屏幕处于横屏还是竖屏
- aspect-ratio 基于视口的宽高比例
- device-aspect-ratio 基于设备屏幕的宽高比
- color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
- color-index 设备的颜色索引表中的颜色数
- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
- resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
- scan 扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）
- grid 检测输出设备是网格设备还是位图设备

创建媒体查询时，上述特性(scan和grid不行)都可加上min和max前缀创建媒体查询的范围。除了

资料来源：

http://sc.chinaz.com/info/130410113358.htm

时间： 2024-10-11 17:30:57

HTML5移动Web开发的相关文章

HTML5移动Web开发实战 PDF扫描版?

<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web.设备端配置和优化,变互.响应式设计.设备访问,调试.性能测试.富媒体等角度出发,包含了60多个实用的示倒,详细阐释如何构建快速.响应式的HTML5移动网站,适用于iOS.Android.WindowsPhone和BlackBerry等众多主流移动应用平台.  <HTML5移动Web开发实战>作者是

HTML5移动Web开发（八）——避免文本字体大小重置

适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为我们希望能够完全掌控用户界面的设计和浏览器对页面的渲染结果. 新建ch02r02.html <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="vi

浅淡HTML5移动Web开发

说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中显示,后者则采用百分比.关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5.css3的到来又增添了新的生机. 响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局.弹性图片和媒体查询等)整合在了一起

【html5移动web开发】关于移动端开发

1.Google Analytics分析工具的使用:注册后页面中加入Google Analytics的代码,可以分析出有哪些设备在访问网站或者哪些页面访问量比较大. 2.Modernizr 可以检测浏览器对html5元素的支持性.可以判断是否支持localstorage等等 3.html5元素在旧版本的IE浏览器下显示为块级元素   article,aside,nav,section{ display:block;} 4.PC端采用固定布局与流体布局,而在移动网站中我们始终使用流体布局,它可以使

HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的技术,本身也仍在不断的演进.移动端Safari浏览器是当前最常用的iPhone应用,它使开发人员可以创建高性能的网页应用并提高用户的浏览体验.移动网站的好处在于,你不需要申请开发者账号就可以运营和维护,不需要通过任何应用市场的审核就发布,不需要通过繁琐的审核就可以在任何时候更新.但是它也有许多问题,

html5移动web开发实战必读书记

原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mobilexweb.com/emulators https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators 2.html5 DTD <!doctype html> <meta charset=

HTML5移动Web开发（七）——通过界面图标启动Web应用

现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的Web应用绑定到界面上的一个图标,用户通过点击界面上的图标就可以启动对应的Web应用了. 但是不同浏览器对于触碰图标的反应是不一致的.在这里,我们将探索不同浏览器对于点击图标启动的不同反应,从而使点击图标启动Web应用的特性能够覆盖到更多的浏览器.   下载源代码例子(http://pan.baidu.

《HTML5移动Web开发指南》学习笔记(一)

第一章 移动互联网时代的Web技术 HTML5+CSS3+JavaScript的移动应用将会是未来的趋势. HTML5优势: 1.Canvas绘图: 2.多媒体: 3.本地存储: 4.离线应用: 5.使用地理位置: 6.有移动Web应用框架. 第二章 移动设备HTML5页面布局 HTML5新语义元素: 1.header头部信息 2.footer文末信息 3.nav导航链接 4.aside页面区域(广告,侧边栏) 5.article 文章内容 6.section 文档章节 7.hgroup主副标题

HTML5移动Web开发（三）——在移动网站中使用HTML5

创建一个简单得HTML5页面ch01e2.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head> <body> hello to the HTML5 world. </body> </html> HTML5和其他HTML页面的唯一区别就在于我们使用