1 webApp介绍
App(native原生态的):指的是原生态app直接运行在操作系统上运行。
主流的移动端操作系统:
Andriod:Java eclipse
iOS:object-c(oc)、swift:xcode:苹果电脑
webApp:用HTML5编写的移动web运用,依赖于浏览器(微信浏览器、qq浏览器),可以不加修改,直接运行在Android、iOS、pc端。
优势:一套代码到处运行(跨平台运行,兼容性)
劣势:运行速度不如native App ,某些底层功能缺失。
微信浏览器(iOS):UIWebView WXWebview
2像素基础
1)物理像素(physical pixel)
一个物理像素就是显示器上的最小物理显示单元。在操作系统(os)的调度下,每一个物理像素都有自己的颜色值和亮度值。
2)设备独立像素(density-independent pixel)又称为css像素或者逻辑像素。他是浏览器使用的抽象单位,主要用来在网页上绘制内容,也就是css px是专门为web开发者提出的一个抽象概念,也就是我们平时写的css 的样式相关。也分辩率(720*1280px)没有关系。
3)设备像素比(简称dpr)
设备像素比=物理像素/设备独立像素
一般在pc端,设备像素比值是1
一般在移动端,设备像素比值是2
结论:美工设计图 pc端的设计图,你量到多少,css就写多少
手机端,你量到多少,css写一半,比如你宽度是640 代码就写320px
一般情况下,美工提供的效果图是640px*xx(iPhone5)或者750px*xx(iphone6)
代码里面对应就是320px或者375px。
用户统计(umeng,腾讯统计)
通过window.devicePixelRatio来获取设备像素比
3 viewport
Viewport(视口)就是设备的屏幕上用来显示我们的网页的哪一块区域,也就是浏览器用来显示网页内容的那部分区域。
Viewport不限于浏览器可视区域的大小。一般情况下,移动端viewport都大于浏览器的可视区域。一般情况下viewport的宽度是980px或者1024px
获取viewport的宽度:document.documentElement.clientWidth;
开发环境:
jdk
Tomcat 8.0
Cdn:
文件(静态文件)存储:七牛、OSS
1)将项目移动到tonmcat下面webapps下面——》用webstorm打开webapps下面该项目。--》点击bin/startup.bat启动Tomcat
2)查看电脑ip win+r —》输入cmd ——>出现命令框——》输入ipconfig》查看ipv4关键字,后面的ip
3)、如果有没修改tomcar的任何配置,(http://localhost:8080)就是对应Tomcat下面的webapps的路径。
正是因为viewport的宽度比屏幕的宽度大,当页面内容比较多,宽度比较大的时候,需要左右滚动,上下滚动才能看完所有的信息,这个交互很不友好的,
4 meta
我们可以通过meta标签,对viewport进行控制
一般我们的设置之后想要的效果
1)viewport的宽度==屏幕的宽度
2)同时不允许用户手动缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
属性名称 | 作用 |
width | 设置viewport的宽度device-width |
initial-scale | 初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 |
maximum-scale | 允许用户缩放到的最大比例。 |
minimum-scale | 允许用户缩放到的最小比例。 |
height | 一般不设置。 |
5 rem
Rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
Rem的特点:
默认情况lrem==16px当然,这和浏览器默认字体相关。(坑:cheome最小字体是12px)。
设定了HTML标签的font-size,1rem对应的值自动变化。1rem==font-size的值。
Rem的使用:
动态设置html元素的font-size,即可实现一个元素(div,p//)高度、宽度、字体等动态变化。
2)动态设置html元素font-size的方法:css媒体查询、js;
3)测试效果图得到的是xxpx,我们需要装换成rem
代码里写具体的px,然后将代码上次到指定网点http://www.520ued.com/tools/rem
Sass函数
@function pxToRem($px) { @return $px /23.4 * 1rem; }
6 Flex
一、Flex布局是什么?
在之前我们的布局方式:dipayl+position+float,这种方式布局基本可以解决所有的布局,但是,对于一些特殊布局实现起来却不容易,比如垂直方向居中。
Flex的弹性布局,用来为盒子模型提供最大的灵活性。
所有的元素都可以设置为flex布局
注意:如果使用了flex布局,所有的子元素float、clear、vertical-align等属性将失效。
二、容器的属性
只要一个元素设置为flex布局,该元素我们成为flex容器,它所在的所有子元素将成为容器成员,也成为flex项目。
也就是,一个大的div,嵌套这2个小的div,如果大的div设置了flex布局
大的叫容器,小的叫项目。
2.1 flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;}
它可能有4个值。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2.2 flex-wrap
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;}
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;}
2.4 justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;}
}
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2.5 align-item
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
2.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
该属性可能取6个值。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
三、项目的属性
3.1 order
3.2 flex-grow
3.3 flex-shrink
四、综合小案例
草料二维码chrome插件。
7 touch
一、什么是触摸事件?
触摸事件是移动端浏览器特有的HTML5事件,他和pc的端鼠标类似,同时由于一些事件存在一定的延迟,比如click事件有300毫秒的延迟时,这个延迟很影响用户体验。所有那。Touch事件就出现了,为了解决移动端特有事件。
二、常用触摸事件
注意:触摸事件有很多,但是目前很多事件只有部分浏览器支持,我们只学习几个。
解决click事件延迟
事件名称 | 描述 |
touchstart | 开始触摸的时候触发,也就是手指放到屏幕的一刻 |
touchmove
| 手指开始移动的时候触发,而且是一直触发,。也就意味的 |
touchend
|
|
|
|
Event 对象存在的touch相关属性
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。