一. 基本技巧
1. 做移动端,使用百分比
2. CSS3提供的弹性盒子 display:box
概念: 这是CSS3提供的,专门为移动端所设计的;
使用: 在父元素中设置display:box,在子元素中设置box-flex:1
(可以设置为其他数字,比如设置为2,就表示设置该子元素
剩下的空间占据2等份的空间),这样就会等分父元素中除去
所有子元素内容所剩下的空间.
display:block 和 box-flex:2 在设置时,不同的浏览器有不同的前缀,
display: -webkit-box; //chrome浏览器
display: -moz-box; //火狐浏览器
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex:1;
示例: <div class="nav">
<div class="left">11111111111111</div>
<div class="center">2222222222222222222222</div>
<div class="right"></div>
</div>
css样式:
<style>
.nav{
display: -webkit-box; //chrome浏览器
display: -moz-box; //火狐浏览器
display: box;
}
.nav div{
height:200px;
}
.left{
-webkit-box-flex: 1; //使left占3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid red;
}
.center{
-webkit-box-flex: 1; //使center占3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid blue;
}
.right{
-webkit-box-flex: 1; //使right占3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid green;
}
</style>
3. em 单位
em跟px一样,都是用于设置元素大小或间距的单位,但px代表像素单位,而
em是一个相对单位,它是相对于当前元素的字体大小的一个单位,若该元素
本身没有设置自己的字体大小,那它会继承父元素的字体大小,如果其父元
素也没有设置字体大小,那么它会继承浏览器的字体大小;
注意: em会影响自身元素及其子元素的大小,不会影响父元素的大小
例如: 当前元素的字体大小为20px,那么1em=20px;若当前元素的字
体大小为30px,那么当前元素的 1em=30px;所以说em是相对
于当前元素的字体大小的一个单位.
div{
font-size:20px;
width: 10em;
height:20em;
border: (1/20)em solid red;
}
说明: 这个div的宽度就为10*20=200px,高度就为20*20=400px,
border就为 0.05px solid red;
4. rem 单位
rem 根em相似,都是换算单位,只是rem与em换算时相对的元素不一样,并且rem是
CSS3提供的,如果使用rem作为换算单位,那么该元素下的所有元素的换算
单位就不受当前元素的字体大小的影响,而是依据根元素的字体大小来换算的,
根元素一般是html或者浏览器,浏览器的字体大小默认为16px;
二. 移动端的框架
zeptojs 跟jQuery框架很类似,但它有滑动效果的封装
hammerjs 专门做手势的js
jQueryMobile 为移动端所开发的框架
三. jQueryMobil
概念: jQueryMobil是为移动端的开发所设计的框架,它可以说成是移动端的jQuery
使用时必须导入的三个核心文件:
1. jquerymobile-1.4.5.min.css 这是核心的CSS文件,导入html的head中
2. jquery.min.js jQuery的js文件,导入body标签之后
3. jquerymobile-1.4.5.min.js 这时核心的js文件,导入jQuery.js之后
应用:在导入了上面三个核心文件之后,我们就可以开始我们的移动端的开发了.
<div class="page" id="page1">
<div class="header">
头部
</div>
<div class="content">
中间内容
</div>
<div class="footer">
尾部
</div>
</div>
说明: 1. 上面的三个类名是jQuerymobile设定好的类名,我们不能随意更改,
我们可以给div设置id或其他属性来区分它们;
2. 我们知道在移动端中(如手机),屏幕呈现给我们的都只有一个页面,
所以这里就可以解释一个页面中有多个page,但屏幕在一个时刻只会
给我们呈现一个page的内容,那么是通过什么来使同一个页面中的
page相互跳转或者是不同的html文件的页面相互跳转的呢?方式很多,
比如a标签等等,但是我们要知道,在jQuerymobile中页面的跳转
都是使用ajax来实现跳转的.
page: 这是一个父元素,代表一个页面,一个html中可以有多个page;
当设置了多个page时,我们可以通过设置a标签来跳转到另一个
page页面(通过ajax来跳转的)
header: 头部,是jQuerymobile定义的头部,我们不能随意更改
content: 中间内容部份,是jQuerymobile定义的内容区域,我们不能随意更改
footer: 尾部,是jQuerymobile定义的尾部,我们不能随意更改
四. jQuerymobile的属性
data-ajax="true" 使用ajax加载
data-ajax="false" 不使用ajax加载
data-role="dialog" 使页面加载进来的时候以弹出框的形式出现
data-role="button" 使a标签为按钮形式
data-inline="true" 使button宽度缩小(button在jQuerymobile中是块级元素,这样就是设置为行内元素)
data-role="back" 回退按钮,只能用于a标签,从哪个页面跳转就进来,就回退到哪个页面