移动端开发-布局+框架+案例篇

移动端开发-布局+框架+案例篇###模板引擎

1.ES6模板字符串

ES6中：${JS代码}

//ES6中需要两个过程 :

//1.定义模板

var htmlStr=`<p>${1+2}</p>`;

//2.⼿动将模板放到指定元素中

$(".box").html(htmlStr)；复制代码

2.EJS模板

//EJS 四步曲

//1.在HTML结构中定义容器例如：<div id="box"></div>

/2.通过AJAX动态获取data数据

data=[{a:"A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}];

//3.造模板搭建HTML结构构导⼊数据

//4.通过der 将html结构，模板数据，data数据渲染出来

//der(模板的html结构,{模板数据：真实数据(⼀般都是通过AJAX获取出来的数据)})

//4-1 获取HTML模板

var boxHTML=$("#boxTemplate").html();

//der()

var der(boxHTML,{boxData:data});

console.log(result);

$("#box").html(result)；复制代码

3.造模板-->

给script标签加上type="text/template"表⽰的是html模板

加个id="boxTemplate"是为了⽅便后⾯第四部获取这个html模板⽤的

boxData：是你⾃⼰定义的数据的名字他是模板数据

我们还需要把他跟AJAX获取出来的数据相关联

<ul>

<%$.each(boxData,function(index,item){%>

<li>

</li>

<%})%>

</ul>

</script>复制代码

viewporet

移动端适配

准备⼯作1：

width=device-width：宽度等于当前设备的宽度

initial-scale=1：初始缩放⽐例

minimum-scale=1：允许⽤户的缩放的最⼩⽐例(默认值是1)

maximum-scale=1: 允许⽤户的缩放的最⼤⽐例(默认值是1)

user-scalable=no：是否允许⽤户缩放（默认值是no，⼀般都是不希望⽤户去缩⼩放⼤界⾯）复制代码

准备⼯作2：加在⼀些兼容⽂件

在IE9以下是不⽀持h5，也不⽀持CSS3中@media，所以我们需要加载⼀些js⽂件来保证我们的效果的兼容问题

<!--[if lt IE 9]>

<![endif]-->

准备⼯作3（选择性加上）：设置浏览器的渲染模式是最⾼的

现在很多⼈的电脑IE浏览器的浏览器模式是IE9，IE10，IE11，都是⾼版本浏览模式，但是有些IE9 ⽂档模式却是IE8，浏览器是按照⽂档模式去渲染的，所以会出现不兼容问题，那么我们就⼿动打开控制台修改⼀下⽂档模式，但是很多⼈不会控制台，我们就考虑这⼀部分⼈，为了他们我们可以强制IE的渲染⽅式为最⾼，保证我们的⽂档模式是最新的

还有个

chrome=1 他是⾕歌内嵌的⼀个浏览器框架（GCF：Goole Chrome Frame）

如果电脑上装了这个框架，不管你⽤的什么版本的IE都会⽤webkit内核和V8引擎来排版运算，要是没装就和上⼀个没有chrome=1的那个⼀样加载

关于IE版本条件注意语句

1、只有IE才能识别

<!--[if IE]>

<![endif]-->

因为只有IE5以上的版本才开始⽀持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

2、只有特定版本才能识别

<!--[if IE 8]>

<![endif]-->

识别特定的IE版本，⾼了或者低了都不可以。上例只有IE8才能识别。

3、只有不是特定版本的才能识别

<!--[if !IE 7]>

<![endif]-->

上例中特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。

4、只有⾼于特定版本才能识别

<!--[if gt IE 7]>

<![endif]-->

上例中只有⾼于IE7的版本才能识别。IE7⽆法识别。

5、等于或者⾼于特定版本才能识别

<!--[if gte IE 7]>

<![endif]-->

上例中IE7和更⾼的版本都能识别。

6、只有低于特定版本的才能识别

<!--[if lt IE 7]>

<![endif]-->

上例中只有低于IE7的版本才能识别，IE7⽆法识别。

7、等于或者低于特定版本的才能识别

<!--[if lte IE 7]>

<![endif]-->

上例中IE7和更低的版本可以识别。

关键词解释

上⾯那些代码好像很难记的样⼦，其实只要稍微解释⼀下关键字就很容易记住了。

lt ：就是Less than的简写，也就是⼩于的意思。

lte ：就是Less than or equal to的简写，也就是⼩于或等于的意思。

gt ：就是Greater than的简写，也就是⼤于的意思。

gte：就是Greater than or equal to的简写，也就是⼤于或等于的意思。

!：就是不等于的意思，跟javascript⾥的不等于判断符相同。

特别提⽰：

１、有⼈会试图使⽤<!--[if !IE]>来定义⾮IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执⾏，这个代码在⾮IE浏览下被当做注释视⽽不见。

２、我们通常⽤IE条件注释根据浏览器不同载⼊不同css，从⽽解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代<!--[if IE]>

alert("你使⽤的是IE浏览器！");

</script>

<![endif]-->复制代码

响应式布局

1.百分⽐+@media

width：浏览器的宽度

height：浏览器的⾼度

device-width：设备的屏幕宽

device-height：设备的屏幕⾼

orientation：检测屏幕是出于横向还是纵向

aspect-ratio：检测浏览器可视宽度和⾼度的⽐例（9/16）

device-aspect-ratio：检测设备屏幕宽度和⾼度的⽐例

ie9浏览器手机版

color：检测颜⾊位数（min-color:32检测颜⾊是不是32位的）

color-index：检测设备颜⾊索引表中的颜⾊值都是正数

grid：检测输出的设备是⽹格还是位图设备

resolution：监测屏幕或者打印机的分辨率

min-resolution：300dpi

max-resolution：118dpcm

⼀般之前的布局都是百分⽐布局：或者流式布局

@media都是配合其他的⽅式去⽤

@media (max-width: 900px) and (min-width:500px ){

.box{

display:block;

width: 100%;

}

}复制代码

2.DPR

iphnoe3分辨率是320*480，iPhone4分辨率是640*960

这两款⼿机实际上都是宽为320px，这就导致了屏幕⼤⼩没变。实际像素却多了⼀倍，

这时，⼀个css像素就等于两个物理像素，这就是像素密度⽐

window.devicePixelRatio来检测素密度⽐

为什么设计师给你的设计稿⼀般都是640*960 750*1334复制代码

@media only screen and (device-pixel-ratio:1 ) {

/*device-pixel-ratio：来检测素密度⽐*/

}复制代码

3.REM布局

⼀个CSS单位

px是固定单位：我们设置300px*200px的尺⼨，不管设备怎么变，都会按照原有尺⼨⼤⼩渲染，不受其它的影响

rem是相对单位：相对于当前页⾯根元素(html)的字体⼤⼩来设置的

REM响应式布局：

⾸先我们严格按照设计稿的尺⼨来写样式，只不过在写样式的时候，把所有的PX变为REM (假设设计稿是640的尺⼨)

当我们把页⾯放在320的⼿机上，之前写的样式需要整体缩⼩⼀倍，此时没必要⼀个个的样式进⾏更改，我们只需要把HTML的字体⼤⼩在原来的基础上缩⼩⼀倍即可（HTML字体缩⼩，之前以REM为单位的值也都会跟着缩⼩）

为了⽅便转换计算，我们⼀般把HTML的初始字体⼤⼩设置为100（浏览器最⼩字体时10/12px，我们缩减太⼩后，浏览器识别不了）

var dW = 640; //设计稿的宽

var win==document.documentElement.clientWidth || document.body.clientWidth;

document.documentElement.style.fontSize=win *100/dw+ "px"；复制代码

移动端框架的掌握

bootstrap

swiper

iscroll

移动端事件的处理

实现单击事件

珠峰培训：移动端事件

移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup keydown)...

TOUCH事件模型(处理单⼿指操作)、GESTURE事件模型(处理多⼿指操作)

TOUCH:touchstart、touchmove、touchend、touchcancle

GESTURE:gesturestart、gesturechange、gestureend

1、click：在移动端click属于单击事件，不是点击事件；在移动端的项⽬中我么经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是

在移动端使⽤click会存在300ms的延迟：浏览器在第⼀次点击结束后，还需要等到300ms看是否触发了第⼆次点击，如果触发了第⼆次点击就不属于click了，没有触发

2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑...

单击和双击(300MS)

点击和长按(750MS)

点击和滑动(X/Y轴偏移的距离是否在30PX以内，超过30PX就是滑动)

左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑相反就是上下滑)

左滑和右滑(偏移的距离 > 0 = 右滑相反就是左滑)

3、移动端事件库

->FastClick.js：解决CLICK事件300MS的延迟

->TOUCH.JS：百度云⼿势事件库 github/de.baidu

->HAMMER.JS复制代码

touch模拟单击事件

移动端开发-布局+框架+案例篇

发布评论取消回复

最近发表

热门文章

标签列表