移动web开发要点
pixel像素基础
详细内容可查看
http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html
- px : css逻辑像素，浏览器使用的抽象单位
- dp,pt : 设备无关像素，物理像素
- dpr : 设备像素缩放比
在retina屏幕 1px(逻辑像素) = 4dx(物理像素)
viewport视图
最佳viewport
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
高效的移动web布局
Flexbox弹性布局
学习ing
居中
div.center1{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
div.center2{
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}