首页 > 代码库 > 响应式基本知识

响应式基本知识

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.隐藏冗余的元素

经常,切换位置元素,使用(绝对定位),减少重绘提高渲染特性
8. 移动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行;
9. 300毫秒故事
移动web页面上的click事件响应都要慢上300毫秒。
突破方法:Tap事件(自定义事件)代替click事件。
移动框加库 :Zepto.js.
Tap “点透”的bug;
解决:
1.使用 缓动动画,过度300ms
2.中间层加一个透明的层,让中间事件接受“穿透”事件,稍后隐藏
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)

响应式基本知识