2015-07-06 02:40

移动Web开发（Html篇）

Jin 1935 5

历经一年左右的移动web开发，前期HTML5、css3技术的新鲜感，对于一些曾经受限于PC、IE浏览器的人来说相当有吸引力，时间久了，越发的上手，遇到的问题也相应的增多，兼容性问题也远比PC的更严重：各式各样的设备，多种多样的分辨率，只有更烂没有最烂的第三方浏览器，所以需要寻找一个比较合适、大家都可以接受的降级处理方式很重要，当然更重要的是写好自己代码，预先避免一些简单问题；

响应式web设计

响应式布局意味着媒体查询，在css2就已经出现，随着html5、css3的到来增添了新的生机。它将已有的开发技巧（弹性布局、弹性图片和媒体查询等）整合在了一起，并命名为响应式web设计。

图片1.png

如上图所示，在不一样的设备中，通过媒体查询适配各种设备，针对不一样的设备写不一样的内容样式，达到相同效果及信息完整。

媒体查询

例：

<link rel=”stylesheet” media=”screen” href=”style.css” />
<!--使用了媒体查询，通过 标签的media属性为样式表指定了设备类型-->
<link rel=”stylesheet” media=”screen and (orientation:portrait)” href=”style.css” />
<!--针对设备进行适配，且设备纵向放置时候才匹配-->
<link rel=”stylesheet” media=”screen and (orientation:portrait) and (min-width:960px)”
 href=”style.css” />
<!--针对设备进行适配，且设备纵向放置 且宽度大于960px才匹配-->

多种方式：

多种属性：

- 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 检测输出设备是网格设备还是位图设备

样式中的应用

/* 中分辨率屏幕 */
@media(-webkit-min-device-pixel-ratio:1){ css 代码段 }
/*高分辨率屏幕*/
@media(-webkit-min-device-pixel-ratio:1.5){ css 代码段 }
/*超高分辨率屏幕（传说中的Retina屏）*/
@media(-webkit-min-device-pixel-ratio:2){ css 代码段 }
针对视口宽度不大于960像素的情况加载大括号中的样式。
@media screen and (max-width:960px){ css 代码段 }
设备的分辨率可以分为这几类，但屏幕的尺寸实在太多，如果去全部写一套，开发成本实在太大，
我们只针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。

设备的分辨率可以分为这几类，但屏幕的尺寸实在太多，如果去全部写一套，开发成本实在太大，我们只针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。

Viewportd的设置

例：

含义：

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

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

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

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

结构：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,
 user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

HTML5常用标签

个人常用标签的使用方法：

header \ nav \ section \ article \ hgroup \ aside \ figure \ figcaption

<header>
	<h1>HTML5标签</h1>
	<nav>
		<ul>
			<li><a href="###">1</a></li>
			<li><a href="###">2</a></li>
			<li><a href="###">3</a></li>
			<li><a href="###">4</a></li>
		</ul>
	</nav>
</header>
<section>
	<article>
		<hgroup>
			<h1>权重1</h1>
			<h2>权重2-1</h2>
			<h2>权重2-2</h2>
		</hgroup>
		<p>点点点</p>
		<aside>
			<h1>标题</h1>
			<p>点点点</p>
		</aside>
	</article>
</section>  
<section>
	<figure>  
		<figcaption>标题</figcaption>  
		<p>详情简介</p>  
	</figure>  
	<figure>  
		<dt>点点</dt>  
		<dd>圈圈圈</dd>  
	</figure>  
</section>  
<footer>Copyright 2012</footer>
...
...
...

一、主体结构

header	页面头部，不同与<head></head>
aside	边栏
nav	外部链接集合
section	章节或段落
article	类似文章、摘要或留言POST等形式的记录（一般搭配内嵌头部、尾部、底部结构使用）
hggroup	类似子标题，标题信息、可选标题、TAG标签这样的数据，还是英文更好理解一些，heading of a section
address	联系信息，一般用在article或body锚元素周围
footer	页脚

二、HTML 5元素标记汇总表

文档类型宣告	<!DOCTYPE html>
根元素	html
META元素	head、 title、base、link、meta、style
部件元素	body、section、nav、article、aside、h1、 h2、 h3、h4、 h5、 h6、hgroup、header、footer、address
分组内容元素	p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、div
文本层次语义元素	a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span
编辑元素	ins、del
嵌入内容元素	img、iframe、embed、object、param、video、audio、source、canvas、map、area
表格元素	table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th
表单元素	form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter

互动元素	details、summary、command、menu
脚本元素	script、noscript

本文信息比较短浅，不详细之处请参考各大技术网站的技术帖！本文只是例举一些个人开发过程中有接触到的一些东西，也是第一次发表此类文章，内容不丰富或存在不详细之处，请见谅!

《下期主题：移动web开发（css篇）》

上一篇文本编辑器推荐-Notepad++（下）

下一篇动画也就那点事

移动Web开发 （Html篇）

移动Web开发（Html篇）