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