必知必会--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标签

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

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

常用写法：

设计移动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 竖屏

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