Appcan开发之页面布局与CSS排版(转)

在Appcan开发中，首先要进行的就是页面布局，然后在这个页面上填充数据，加上互动元素，最终构成完整的应用。

因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发，所以与普通web开发基本没有区别，理解成webapp的开发或许更好解释。

iOS、Android系统中已经内置webkit内核，而appcan正是利用webkit来运行我们编写的页面，也就是可以将appcan看作是一个加强的webkit内核，强在它能通过js来控制手机某些功能，比如打电话、发短信、定位等等，这是普通webapp所不能达到的。

HTML页面布局

下面就介绍一些在appcan需要注意的问题，避免这些问题所带来的麻烦。

移动设备屏幕一般都比较小，在手机浏览器直接浏览网页时，会对网页进行缩放。可是我们开发的是类似原生的应用，是不能允许用户对网页区域进行缩放、调整大小操作的，那如何来解决呢？

我们可以在appcan里新建一个叫index.html的页面模板，看它头部代码：

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title>
</title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-media.css">
<script src="js/zy_control.js">
</script>
<script src="js/zy_click.js">
</script>
<script>
</script>
</head>

从代码上可以看到，页面采用标准的html5头部声明。<title> 标签可有可无，留空也可。接下来是声明页面编码，建议使用UTF8编码，因为JS中ajax与json编码只能是UTF8，所以最好使用UTF8，避免出现乱码和程序异常。

现在进入重点部分，viewport这个元属性，什么是viewport？

我再分别解释一下content里的内容。

target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 为设备原本的DPI值，不会有任何缩放。

width=device-width，指定屏幕宽度，device-width设备屏幕的宽度。

initial-scale=1，初始缩放比例，设置为1，表示不进行任何缩放，显示原始大小。

user-scalable=no，用户否否可以手动缩放页面，设为no不允许。

minimum-scale=1.0，最小缩放比例，设为1，最小只能缩放到1倍。

maximum-scale=1.0，最大缩放比例，设为1，最大只能缩放到1倍，与上一项配合，保证，页面不会进行缩放。

其实user-scalable为no时，最后两项不会起作用，因为不会发生缩放问题，图个心安，就都放上了。

这样设置完成后，就能够保证，在任何设备中，网页的宽度就是屏幕显示区域的宽度，不会发生变化，这样我们进行排版里就不会出现问题，这也是与普通web开发比较大的不同之处了。

ui-media.css 这个文件就是官方默认生成的CSS文件，文件大概的用途就是在不同分辨屏下设置相对合适的字体大小，从9px到32px不等，iphone为16px, ipad1为20px，800*480的android机基本为24px。正是因为这个文件，所以才使得在不同大小的屏幕上的字体看起来不会有太大的比例失调问题，比如在ipad上字体不会显示得太小，iphone上不会太大。更重要的是文字的大小会直接影响以后CSS长度单位的设置！

CSS 排版注意问题

使用em单位

至于ui-base.css文件，是整个项目中的CSS样式文件，所有用到的样式都这个文件中，编写与普通web网页中的编写是一致的，而且支持css3属性，合理的使用CSS3属性会提高性能和效率。

无论是手机上还是电脑上，CSS的兼容性问题一直存在，appcan中也不例外，虽然支持CSS3但是各平台支持都有差异，需要酌情使用。

对于appcan，最头疼的就是不同分辨率的显示效果，实例中针对不同大小的屏幕都使用同一种布局方案，这也是大部分应用采用的方案。那么如何使得这些设备中显示上的效果基本一致呢？

大家考虑一下，ui-media.css使得屏幕越大的设备字体就越大，反之亦然。那么有没有能够让布局自适应的方法？在CSS中有em这么个单位，它不是一个精确的单位，而是一个相对的单位，相对谁呢？相对的就是字体大小，正是上面讲到的字体大小直接影响CSS布局的原因。

em会继承父级元素的字体大小，记住这点很重要，不至于在使用中出现大小不一致时摸不到头绪，影响开发。

文档有默认文字大小，每个元素中又有字体大小，所以使用em时，要冷静的清晰去判断当前位置的文字大小的具体的取值。

em单位会受到页面默认字体大小的影响，内层元素会受到外层元素字体大小的影响。

为什么要使用em而不去使用px呢？em是相对大小，px是固定大小，em在不同分辨率中会显示出不同大小，而px始终是一个大小！

大家可以去看看ui-base.css与官方提供的UI的CSS文件中，大量的在使用em作为单位，而px单位出现几乎为零。

在项目开发中推荐大家使用em作为单位使用，尽量避免使用px，这样可以保证在不同设备上显示效果基本一致。

背景图片缩放

说完了字体我们再说另一个可能需要缩放的元素——背景图片。

普通的img标签的图片，可以通过控制长宽来限制缩放，而背景图片却不可以，当容器大小发生变化时，背景图片依然是原有大小。

在CSS3中同样存在一个可以帮助我们来控制背景图片按容器大小进行缩放的属性——-webkit-background-size:100% 100%;

至于这个属性的使用方法，我就不过多介绍了，可以自己谷歌。只要在需要背景图片缩放的元素上设置此属性即可。

那么在我们的实例中，几乎所有用到背景图的时候，都加上了这个属性，大家可以看看实例中底部按钮是如何使用这个属性的，按钮的大小会根据屏幕进行缩放，同时按钮的背景一直都是充满整体按钮的。这个属性在开发过程中非常实用！

在使用了em和-webkit-background-size两个属性后，你就会发现在appcan中开发项目是多么快乐的一件事情啊。