移动web基础知识

一.pixel 移动开发像素知识

px: css pixel 逻辑像素，浏览器使用的抽象单位

dp,pt： device independent pixels 设备无关像素

dpr: devicePixelRatio 设备像素比缩放

计算公式： 1px = (dpr)2 * dp

DPI: 打印机每英寸可以喷的墨汁点（印刷行业）

PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

目前，在计算机显示设备惨呼描述上，两者意思表达的是一样的

计算公式：以iphone5为例

ppi = √ (1136^2 + 640^2) /4 = 326ppi(视网膜Retina屏)

注意：单位为硬件像素，非px

| ldpi | mdpi | hdpi | xhdpi

ppi | 120 | 160 | 240 | 320
默认缩放比| 0.75 | 1.0 | 1.5 | 2

Retina屏（高清屏）： dpr都是等于大于2

二.viewport

手机浏览器默认为我们做了两件事情

页面渲染在1个980px(ios)的viewport
缩放> 为什么渲染时，要有Viewport?

为了渲染正确

viewport分为2种：

visual viewport(度量/视口) = 窗口缩放sclce

layout viewport(布局viewport)

为什么不适用默认的980px的布局viewport?

宽度不可控制，不同系统不同设备的默认值都可能不同
页面缩小版显示，交互不友好
链接不可点
有缩放，缩放后又有滚动
font-size为40px等于PC上12px同等物理太少,不规范*

三. meta标签

<meta name="viewport" content="name=value,name=value">

width: 设置布局viewport的特定值（“device-width”指设备宽度）
initial-scale: 设置页面的初始缩放
minimun-sacle: 最小缩放
maximun-sacle: 最大缩放
user-scalable: 用户能否缩放> 注意： initial-scale自带width = deviece-width

移动web最佳viewport设置

[布局viewport] = [设备宽度] = [度量viewport]

常用设置： <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

四.设计移动Web

方案一：根据设备的实际宽度来设计（常用）

手机宽320px,我们就拿320px设计

方案二：1px = 1dp（淘宝用过）

缩放0.5，根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片都不需要额外处理

五.移动web布局

不定宽高的水平垂直居中

.wrap{position:absoulue;top:50%;left:50%;z-index:3;-webkit-transform: translate(-50%,-50%);}

flexbox版：.wrap{justify-content:center,;align-itens: center;display: -webkit-flex}

flex布局就不多说了，可以搜一下,我之前有写一个demo

flex 有兼容性

-ios 可以使用最新的flex布局
-android4.4以下，只能兼容旧版的flexbox布局
-android4.4以上，可以使用最新的flex布局

六.响应式设计

响应式设计，常用媒体查询，例如
@media screen and (max-width: 1024){....}

媒体类型：

screen(屏幕)
print(打印机)
handheld(手持设备)
all(通用)

常用媒体查询参数:

width —— 视口宽高
height ——视口宽高
device-width ——– 设备的宽度
device-height ——- 设备的高度
orientation ——- 检查设备处于横向（landscape）还是竖屏（portrait）

设计点一：百分比布局。没有任何平滑渐变

设计点二: 弹性图片

设计点三：重新布局，显示与隐藏

当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想，力求页面简介，所以我们必须做出一些处理：

1.同比例缩减元素尺寸

2.调整页面结构布局

3.隐藏多余的元素

注意：经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能

所以，使用响应式布局，性能不是最优，但是减少重复开发，一个页面包含所有设备。

七.特殊样式处理

1.高清图片

在移动web页面上渲染图片，为了避免产生模糊，图片的宽高应该用物理像素单位渲染，即是100_100的图片，应该使用100dp_100dp

width(w_value/dpr)px; height(h_value/dpr)px;

2.一像素边框问题

同样是retina屏幕下的问题，根本原因： 1px 使用2dp渲染

border:0.5px（仅仅ios8可用）
sacleY(.5)

相对单位rem:为了适应个大屏幕的手机，px略显固定，不能根据尺寸的大小来改变，使用相对单位更能体验页面兼容性

em: 是根据父节点的font-size为相对单位

rem: 是根据html的font-size为相对单位

em在多层嵌套下，变得非常难控制，rem更加能作为全局统一设置的度量

remm的基值设置多少好？

回归我们的目的：为了适应个大手机屏幕 rem = screen.width/20

width: px/rem基值 | height: px/rem基值

注意：不使用rem的情况：font-size，因为字体的大小是趋向于阅读的实用性，并不适合与排版布局

3.多行文本溢出…

八.移动web事件

300ms延迟> 在默认的viewport(980px)的页面，旺旺需要双击或者捏开放大页面。正是为了确认用户是双击，还是单击。

safari需要300ms的延迟来判断，而后来的iphone也一直沿用这样的设计，借鉴于成功iphone的android也沿用了这样的设计，于是‘300ms’成了一种规范