移动web基本知识

1.pixel像素基础1.px:csspixel 逻辑像素，浏览器所使用的抽象单位2.dp,pt:设备无关像素3.devicePixelPatio 设备像素缩放比例2.viewport1. ios的viewport是980px;普遍2.安卓不一定注：为什么不使用默认的980px的布局viewport原因：宽度不可控制，不同的系统设备的默认值都可能不同页面缩小版显示，交互性不友好链接不可点有缩放，缩放后又有滚动例如font-size为40px等于pc上12px同等物理大小，不规范来改变默认值3.viewport meta标签1.width:设置布局viewport的特定值,但是为了适应所有的不同尺寸的手机屏幕大小，用，device-width自适应用户的屏幕大小。2.initial-scale:设置页面的初始缩放：公式：window.innerWidth/document.body.ClientWidth.3.minimun-scale:最少缩放4.maximun-scale:最大缩放5.user-scalable:用户能否缩放常用的viewport设置：4.viewport_coding方案一：设备实际宽度设计（常用）手机宽320px。（按照这个尺寸重新设计）方案二：1px=1dp5.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-wrap1.-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-start2.倒序：align-self：flex-end;3.垂直居中：align-self:center;4.填满：align-self:auto;以下按照父元素元素排**************************************************align-items1.子元素顺序align-items:flex-start2.子元素垂直倒序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%}

设计点三：重新布局，显示和隐藏到达手机宽度时，有必要抛弃一些传统的页面，力求简单，简洁1.同比例缩减元素的尺寸2.调整页面的结构布局3.隐藏冗余的元素经常，切换位置元素，使用（绝对定位），减少重绘提高渲染特性8. 移动web样式特别处理1.一像素边框同样是retina屏幕下的问题，根本原因：1px 使用2dp渲染border:0.5px;仅仅在ios8可以使用做法：sacleY(.5);2.相对单位remem是根据父节点的font-size,变的非常难以为何rem更加能作为全局统一的度量来做。回归我们的目的：为了适应各大手机屏幕rem=screen.width/20; //html的font-size rem基值为屏幕宽度/103.不使用rem的情况：font-size字体的大小是趋于阅读的实用性，并不适合于排版，同理的元素应如此4.多行文本溢出text-overflow:ellipsis;//超出变省略号-webkit-box-orient:vertical;//方向，垂直-webkit-line-clamp:4//第4行；9. 300毫秒故事移动web页面上的click事件响应都要慢上300毫秒。突破方法：Tap事件(自定义事件)代替click事件。 移动框加库 ：Zepto.js.Tap “点透”的bug;解决：1.使用 缓动动画，过度300ms2.中间层加一个透明的层，让中间事件接受“穿透”事件，稍后隐藏3.'上下'都使用tap事件，原理上解决tap穿透事件（但不可避免原生标签的click事件）4.改用fastclcik库 10. 触摸：核心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)