移动web基本知识

1.pixel像素基础
1.px:csspixel 逻辑像素，浏览器所使用的抽象单位
2.dp,pt:设备无关像素
3.devicePixelPatio 设备像素缩放比例
2.viewport

1. ios的viewport是980px;广泛

2.安卓不必定
注：为何不使用默认的980px的布局viewport
缘由：
宽度不可控制，不一样的系统设备的默认值均可能不一样
页面缩小版显示，交互性不友好
连接不可点
有缩放，缩放后又有滚动
例如font-size为40px等于pc上12px同等物理大小，不规范
<meta name="viewport" content="name=value,name=value">来改变默认值
3.viewport meta标签
<meta name="viewport" content="name=value,name=value">
1.width:设置布局viewport的特定值,可是为了适应全部的不一样尺寸的手机屏幕大小，用，device-width自适应用户的屏幕大小。
2.initial-scale:设置页面的初始缩放：公式：window.innerWidth/document.body.ClientWidth.
3.minimun-scale:最少缩放
4.maximun-scale:最大缩放
5.user-scalable:用户可否缩放
经常使用的viewport设置：<meta name="viewport" content="width=device-width,initial-sclae=1,user-scalable=no">
4.viewport_coding
方案一：设备实际宽度设计（经常使用）
手机宽320px。（按照这个尺寸从新设计）
方案二：1px=1dp
5.flexbox弹性合做布局
父元素 用display:-webkit-flex;提示我这个容器要使用弹性布局
子元素 用flex:1 num占容器的比例
flex混合划分：
width:100px flex:2 flex:1;
不定宽高的水平垂直居中：
例子：
position:absolute;
left：50%；
top:50%;
-webkit-tramsform:taanslate(-50%,-50%);
flexbox版： 不定宽高的水平垂直居中
例子：
.parent{
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
6.flex弹性盒子模型
混合：
width:100px flex:2 flex:1;
方向：
flex-direction:row//默认横向
flex-direction:row-reverse;//相反方向
flex-direction:column//纵向
flex-direction:column-reverse;//纵向相反
flex-wrap
1.-webkit-flex-wrap:nowrap;//默认不换行
width:400px;
子元素超过父元素width;//不会换行；
2.-webkit-flex-wrap:wrap;//换行
width:400px;
子元素超过父元素width;//换行
3.-webkit-flex-wrap:wrap-reverse;//倒序换行
如下按照父、子元素均可
justify-content(横向)
1.按left排：justify-content：flex-start;
2.按right排：justify-content：flex-end;
3.水平居中：justify-content:center;
4 两边对齐：justify-content:space-between:
5 按间距划分：justify-content:space-around;
如下按照子元素排
align-self:(纵向)
1.顺序：align-self:felx-start
2.倒序：align-self：flex-end;
3.垂直居中：align-self:center;
4.填满：align-self:auto;
如下按照父元素元素排
align-items
1.子元素顺序align-items:flex-start
2.子元素垂直倒序align-items:flex-end;
3.（第三代垂直居中）align-items:center;
order(排序)
a,b,c,d,e,
当给e加一个order:-1的样式属性值；顺序变为下
e,a,b,c,d;
6.flex弹性盒子模型 兼容性
ios 能够使用最新
android4.4如下，只能兼容旧版的flexbox布局
android4.4以上，能够只用最新的flex布局
7.核心：媒体查询
例子：
@media screen and (max-width:1024px){
#pagewrap{
width:95.5%;
}
#content{
width:62%;
}
#content .article .hr{
width:66%;
margin-left:34%;
}
}
媒体类型：screen (屏幕) all(一样)这两种经常使用 print(打印机) handheld(手持设备)
经常使用媒体查询参数类型：
width----视口宽度
height---视口高度
device-width-----设备的宽度
device-height----设备的高度
orientation:检车设备出于横向（landscape）仍是竖屏（porteait）
设计点一：百分比布局
媒体查询使用不一样的固定宽度设计，只会从一组css到达另外一组css的切换。两张之间的没有任何平滑渐变。当没有命中媒体查询是，表现就会变得不可控制滚动，（滑行）
设计点二：弹性图片
例子：
img{max-width:100%}
<div class="img">
<img />//百分比，时刻占满容器。
</div>
设计点三：从新布局，显示和隐藏
到达手机宽度时，有必要抛弃一些传统的页面，力求简单，简洁
1.同比例缩减元素的尺寸
2.调整页面的结构布局
3.隐藏冗余的元素

常常，切换位置元素，使用（绝对定位），减小重绘提升渲染特性

1. 移动web样式特别处理

1.一像素边框
一样是retina屏幕下的问题，根本缘由：1px 使用2dp渲染
border:0.5px;仅仅在ios8能够使用

作法：sacleY(.5);
2.相对单位rem
em是根据父节点的font-size,变的很是难觉得何
rem更加能做为全局统一的度量来作。
回归咱们的目的：为了适应各大手机屏幕
rem=screen.width/20; //html的font-size rem基值为屏幕宽度/10
3.不使用rem的状况：font-size
字体的大小是趋于阅读的实用性，并不适合于排版，同理的元素应如此
4.多行文本溢出
text-overflow:ellipsis;//超出变省略号
-webkit-box-orient:vertical;//方向，垂直
-webkit-line-clamp:4//第4行；

1. 300毫秒故事
   移动web页面上的click事件响应都要慢上300毫秒。
   突破方法：Tap事件(自定义事件)代替click事件。
   移动框加库 ：Zepto.js.
   Tap “点透”的bug;
   解决：
   1.使用 缓动动画，过分300ms
   2.中间层加一个透明的层，让中间事件接受“穿透”事件，稍后隐藏
   3."上下"都使用tap事件，原理上解决tap穿透事件（但不可避免原生标签的click事件）
   4.改用fastclcik库
2. 触摸：核心
   touchstart:手指触摸屏幕触发（已经有手指放屏幕上不会触发）、
   touchmove:手指在屏幕滑动，连续触发；
   touchend:手指离开屏幕时触发
   touchcancel：系统取消touch时候不会触发（不经常使用）
   触摸事件专有的触摸属性：
   touches:跟踪触摸操做的touch对象数组
   clientX:触摸目标在视口中的X坐标
   clientY:触摸目标在视口中的Y坐标
   identifier:标识触摸的惟一一个ID;
   pageX:触摸目标在页面中的X坐标(涵滚动条)
   pageY:触摸目标在页面中的Y坐标(涵滚动条)
   screenX:触摸目标在屏幕中的X坐标
   screenY:触摸目标在屏幕中的Y坐标
   target:触摸的DOM节点目标
   弹性滚动：
   body层滚动：（系统特殊化处理）
   自带弹性滚动，overflow:hidden失效，gif和定时器暂停
   局部滚动：
   没有弹性滚动，没有滚动惯性，不流畅
   局部开启弹性滚动；
   body{
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
   }
   注意，android不支持原生的弹性滚动！但能够借助第三方库iScroll来实现
   /以上是针对于ios*/
   下拉刷新：
   顶端下拉一点距离页面弹性滚动向下
   上拉加载：
   使用scroll事件而不是touch事件。(android有bug)

转载于猿2048:▷《移动web基本知识》