文 | Yeaseon
Pixel 像素知識
- px： css pixels 邏輯像素，瀏覽器使用的抽象單位
- dp播聪，pt： divice independent pixels 設(shè)備無關(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)為我們做了兩件事情：
- 頁面渲染在一個(gè)980px（ios）的viewport
- 縮放
為什么不使用默認(rèn)的980px的布局viewport？
- 寬度不可控制胖秒，不同系統(tǒng)不同設(shè)備的默認(rèn)值都有可能不同
- 頁面縮小版顯示，交互不友好
- 鏈接不可點(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è)置頁面的初始縮放
- 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í)際寬度來設(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 子元素總尺寸超過父容器尺寸是否換行
flex-wrap: nowrap; //默認(rèn)值 不換行嫉父； wrap 換行沛硅； wrap-reverse 倒序換行
//flex-flow 前兩個(gè)屬性綜合
flex-flow：flex-direction flex-wrap；
//justify-content 子元素位置（左對齊绕辖，右對齊和居中等）
justify-content：flex-start摇肌； //默認(rèn)值 左對齊；flex-end 右對齊仪际； center 居中围小； space-between 兩頭對齊； space-around 兩頭留白的對齊
//align-items
align-items： flex-start树碱； //默認(rèn)值 子元素內(nèi)部上對齊肯适； flex-end 下對齊；
center 垂直居中成榜； baseline框舔； stretch 填滿整個(gè)容器
//align-self 同 align-items 為了給個(gè)別子元素單獨(dú)指定布局位置
//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; |
媒體查詢
在不同設(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 豎屏
過一個(gè)平凡無趣的人生實(shí)在太容易了，你可以不讀書饺窿，不冒險(xiǎn)歧焦，不運(yùn)動(dòng)，不寫作，不外出绢馍，不折騰……
但是向瓷，人生最后悔的事情就是：我本可以……
