移动端开发-布局+框架+案例篇###模板引擎
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获取出来的数据相关联
<script type="text/template" id="boxTemplate">
<ul>
<%$.each(boxData,function(index,item){%>
<!--处理li-->
<li>
<span><%=item.a%></span>
<span><%=item.b%></span>
<span><%=item.c%></span>
</li>
<%})%>
</ul>
</script>复制代码
viewporet
移动端适配
准备⼯作1：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
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]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
因为只有IE5以上的版本才开始⽀持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。
2、只有特定版本才能识别
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
识别特定的IE版本，⾼了或者低了都不可以。上例只有IE8才能识别。
3、只有不是特定版本的才能识别
<!--[if !IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。
4、只有⾼于特定版本才能识别
<!--[if gt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有⾼于IE7的版本才能识别。IE7⽆法识别。
5、等于或者⾼于特定版本才能识别
<!--[if gte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更⾼的版本都能识别。
6、只有低于特定版本的才能识别
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有低于IE7的版本才能识别，IE7⽆法识别。
7、等于或者低于特定版本的才能识别
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![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]>
<script type="text/javascript">
alert("你使⽤的是IE浏览器！");
</script>
<![endif]-->复制代码
响应式布局
1.百分⽐+@media
width：浏览器的宽度
height：浏览器的⾼度
device-width：设备的屏幕宽
device-height：设备的屏幕⾼
orientation：检测屏幕是出于横向还是纵向
aspect-ratio：检测浏览器可视宽度和⾼度的⽐例（9/16）
device-aspect-ratio：检测设备屏幕宽度和⾼度的⽐例
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; //设计稿的宽
mui框架常用组件有哪些
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模拟单击事件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。