文 | Yeaseon
Pixel 像素知識(shí)
- px： css pixels 邏輯像素，瀏覽器使用的抽象單位
- dp，pt： divice independent pixels 設(shè)備無(wú)關(guān)像素
- dpr： devicePixelRatio 設(shè)備像素縮放比
計(jì)算公式： 1 px = （dpr）^2 * dp
iPhone 5 的dpr為2，所以 640dp * 1136dp，就相當(dāng)于 320px * 568px
- DPI：打印機(jī)每英寸可以噴的墨汁點(diǎn)
- PPI：屏幕每英寸的像素?cái)?shù)量，即單位英寸內(nèi)的像素密度
Viewport
手機(jī)瀏覽器默認(rèn)為我們做了兩件事情：
- 頁(yè)面渲染在一個(gè)980px（ios）的viewport
- 縮放
為什么不使用默認(rèn)的980px的布局viewport？
- 寬度不可控制，不同系統(tǒng)不同設(shè)備的默認(rèn)值都有可能不同
- 頁(yè)面縮小版顯示，交互不友好
- 鏈接不可點(diǎn)
- 有縮放，縮放后又有滾動(dòng)
font-size為40px等于PC上12px同等物理大小，不規(guī)范
Meta標(biāo)簽
<meta name="viewport" content="name=value, name=value">
- width：設(shè)置layout viewport的特定值（"device-width"）
- initial-scale：設(shè)置頁(yè)面的初始縮放
- 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">
設(shè)計(jì)移動(dòng)Web
方案一： 根據(jù)設(shè)備的實(shí)際寬度來(lái)設(shè)計(jì)
方案二： 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 份
}
- 不定寬高的水平垂直居中
// 常規(guī)方案
.div{
position: absolute;
top: 50%?;
left: 50%;
-webkit-transform: translate(-50%, -50%);?
}?
// Flexbox
?.parent{
justify-content: center; //子元素水平居中
align-items: center; //子元素垂直居中
display： -webkit-flex;?
}
- Flex相關(guān)css講解
//flex-direction 子元素排列方向
flex-direction：row；//默認(rèn)值 橫向排列；為row-reverse倒序橫向排列
flex-direction：column；//縱向排列；為column-reverse倒序縱向排列
//flex-wrap 子元素總尺寸超過(guò)父容器尺寸是否換行
flex-wrap: nowrap; //默認(rèn)值 不換行； wrap 換行； wrap-reverse 倒序換行
//flex-flow 前兩個(gè)屬性綜合
flex-flow：flex-direction flex-wrap；
//justify-content 子元素位置（左對(duì)齊，右對(duì)齊和居中等）
justify-content：flex-start； //默認(rèn)值 左對(duì)齊；flex-end 右對(duì)齊； center 居中； space-between 兩頭對(duì)齊； space-around 兩頭留白的對(duì)齊
//align-items
align-items： flex-start； //默認(rèn)值 子元素內(nèi)部上對(duì)齊； flex-end 下對(duì)齊；
center 垂直居中； baseline； stretch 填滿整個(gè)容器
//align-self 同 align-items 為了給個(gè)別子元素單獨(dú)指定布局位置
//align-content 與 align-items對(duì)比 換行占用高度不為父容器高度
//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; |
媒體查詢
在不同設(shè)備下，實(shí)現(xiàn)不同的展示效果
@media screen and (max-width: 1024px) { //符合該條件才會(huì)生效
// somethings CSS
}
媒體類型
- screen 屏幕
- print 打印機(jī)
- handheld 手持設(shè)備
- all 通用
常用媒體查詢參數(shù)
- width 視口寬度
- height 視口高度
- device-width 設(shè)備寬度
- device-height 設(shè)備高度
- orientation 橫屏or豎屏 // landscape 橫屏；portrait 豎屏
過(guò)一個(gè)平凡無(wú)趣的人生實(shí)在太容易了，你可以不讀書，不冒險(xiǎn)，不運(yùn)動(dòng)，不寫作，不外出，不折騰……
但是，人生最后悔的事情就是：我本可以……
