必知必会--web移动端开发二三事

文 | Yeaseon

Pixel 像素知识

• px： css pixels 逻辑像素，浏览器使用的抽象单位
• dp，pt： divice independent pixels 设备无关像素
• dpr： devicePixelRatio 设备像素缩放比

计算公式： 1 px = （dpr）^2 * dp

iPhone 5 的dpr为2，所以 640dp * 1136dp，就相当于 320px * 568px

• DPI：打印机每英寸可以喷的墨汁点
• PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

Viewport

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

• 页面渲染在一个980px（ios）的viewport
• 缩放

为什么不使用默认的980px的布局viewport？

• 宽度不可控制，不同系统不同设备的默认值都有可能不同
• 页面缩小版显示，交互不友好
• 链接不可点
• 有缩放，缩放后又有滚动

font-size为40px等于PC上12px同等物理大小，不规范

Meta标签

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

• width：设置layout viewport的特定值（"device-width"）
• initial-scale：设置页面的初始缩放
• minimum-sacle：最小缩放
• maxium-scale：最大缩放
• user-scalable：用户能否缩放

document.body.clientWidth // visual viewport
window.innerWidth // layout viewport

常用写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

设计移动Web

方案一： 根据设备的实际宽度来设计

方案二： 1px = 1dp

Flexbox 弹性盒子布局

.nav {
    overflow: hidden;
    background-color: #DE7C3C;
    padding: 10px;
    display: -webkit-flex;   //表示使用弹性布局
}
.item1 {
    color: #FDDFA7;
    padding: 0 5px;
    text-align: center;
    flex: 1;   //占父容器的比例 1 份
}
.item2 {
    color: #FDDFA7;
    padding: 0 5px;
    text-align: center;
    flex: 2;   //占容器的比例 2 份
}

• 不定宽高的水平垂直居中

// 常规方案
.div{
    position:  absolute;
    top: 50%​;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);​
}​

// Flexbox
​.parent{
    justify-content: center;   //子元素水平居中
    align-items: center;   //子元素垂直居中
    display： -webkit-flex;​
}

• Flex相关css讲解

//flex-direction 子元素排列方向
flex-direction：row；//默认值 横向排列；为row-reverse倒序横向排列
flex-direction：column；//纵向排列；为column-reverse倒序纵向排列

//flex-wrap 子元素总尺寸超过父容器尺寸是否换行
flex-wrap: nowrap; //默认值 不换行； wrap 换行； wrap-reverse 倒序换行

//flex-flow 前两个属性综合
flex-flow：flex-direction flex-wrap；

//justify-content 子元素位置（左对齐，右对齐和居中等）
justify-content：flex-start； //默认值 左对齐；flex-end 右对齐； center 居中； space-between 两头对齐； space-around 两头留白的对齐

//align-items
align-items： flex-start； //默认值 子元素内部上对齐； flex-end 下对齐；
center 垂直居中； baseline； stretch 填满整个容器

//align-self 同 align-items 为了给个别子元素单独指定布局位置

//align-content 与 align-items对比 换行占用高度不为父容器高度

//order 排序

Flexbox 兼容性

• iOS 可以使用最新的flex布局
• android 4.4以下，只能兼容旧版flexbox布局
• android 4.4及其以上，可以使用最新的flex布局

新flex布局	旧flexbox布局
display: -webkit-flex；	display: -webkit-flex-box;
-webkit-flex: 1;	-webkit-flex-box: 1;
justify-content: center;	box-pack: center;
align-items: center;	box-align: center;

媒体查询

在不同设备下，实现不同的展示效果

@media screen and (max-width: 1024px) { //符合该条件才会生效
    // somethings CSS 
}

媒体类型

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

常用媒体查询参数

• width 视口宽度
• height 视口高度
• device-width 设备宽度
• device-height 设备高度
• orientation 横屏or竖屏 // landscape 横屏；portrait 竖屏

过一个平凡无趣的人生实在太容易了，你可以不读书，不冒险，不运动，不写作，不外出，不折腾……
但是，人生最后悔的事情就是：我本可以……