一、pixel 像素知识
px 逻辑像素
dp,pt 物理像素;
dpr 设备像素缩放比;
计算公式:px = (dpr)2 * dp;
平面上 1px = dpr2 * 1dp;
纬度上 1px = dpr * 1dp;
iphone5 dpr为2
ppi 屏幕每英寸的像素数量,即单位英寸内的像素密度。
注意:我们换算的时候应该去算硬件像素,非px
二、viewport
iOS的viewport为980px;android不可控制。
手机浏览器默认做了两件事:页面渲染在viewport中,缩放。
visual viewport 视口:通过缩放变成视口viewport
layout viewport 布局
移动端font-size 为40px才能等于PC上12px同等物理大小。
meta标签改造viewport
<meta name="viewport" content="">
width:设置viewport的特定值
initial-scale:设置页面的初始缩放
minimum-scale:最少缩放
maximum-scale:最大缩放
user-scalable:用户能否缩放,一般设为no
布局viewport = 设备viewport :<meta name="viewport" content="width=device-width">(默认)
视口viewport = 设备viewport:<meta name="viewport" content="initial-scale=1">(即缩放比为1)
常用:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
三、移动开发尺寸方案
1、根据设备的实际宽度,即物理宽度
2、缩放0.5,1px=1dp,1像素边框和高清图片不需要处理
四、布局
1、响应式布局
媒体查询
@media screen and(max-width:1024px){}
常用媒体查询参数:width:视口宽度
height:视口高度
device-width:设备宽度
device-height:设备高度
orientation:检查设备处于横向(landscape)还是竖向(portrait)
设计点:百分比、弹性图片、重新布局,显示隐藏
2、flexbox弹性盒子布局
根据元素个数不同,自动填充整个容器
父级:{display: -webkit-flex; } //标示使用弹性布局
等比划分
子级:{flex: 1;} //num 占容器的比例 1/(1+2)
{flex: 2;} 占容器比例2/(1+2)
混合划分
子级:{width: 100px; }固定宽度 (一般图片宽度固定)
{flex: 1;} 剩余空间等比划分 (文字)
{flex:2;}
不定宽高水平垂直居中
父级:{justify-content: center; //水平居中
align-items: center; //垂直居中
display: -webkit-flex;}
盒模型方向:flex-direction: row(默认,横向)/row-reverse(横向反方向排列)/column(纵向)/column-reverse(纵向反方向)
盒模型换行:flex-wrap: nowrap(默认,子元素不会换行)/wrap(会换行)
盒模型水平排列(用于父元素): justify-content: flex-start(居左)/center(居中)/flex-end(居右)/space-between(两端对齐)/space-around(按间距划分,元素左右两边留相应空间)
盒模型水平排列(用于子元素):align-self:flex-start(居左)/center(居中)/flex-end(居右)/auto(默认)/baseline(相对字体位置)/stretch(填满整个容器)
盒模型排列父子可混合用
盒模型垂直排列(用于父元素):align-content: flex-start(居左)/center(居中)/flex-end(居右)/space-between(上下对齐)/space-around(按间距划分,元素上下留相应空间)/stretch(默认,填充满整个容器)
盒模型垂直排列(用于子元素):align-items:
排序:order: -1(num)
五:移动web下特殊样式处理
1、1像素边框在Retina屏下的解决方案,由于在Retina屏下1像素边框会变成两像素,
{border-top: 1px solid #666;-webkit-transform: scaleY(0.5)}
2、适应各大屏幕手机,推荐使用rem
rem根据html的font-size为相对单位
em根据父节点的相对单位
rem = screen.width/20
一般字体不用rem
3、文本溢出
单行文本溢出{overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis}
多行文本溢出{display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical; //方向垂直
-webkit-line-clamp:2 //多少行}
六、终端交互优化
1、tap事件代替click事件
因为手机为了判断单击和双击,延迟300ms。
tap事件定义:记录touchstart、touchend时记录时间、手指位置,如果手指位置是同一位置,且间隔时间较短(一般200ms),即可认为是手机上的click。
zepto.js移动框架库