响应式基本知识

Posted 2020-08-26 xiao_style

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)