流式布局
移动端基础
- 移动端浏览器主要对webkit内核进行兼容
视口 : 浏览器显示页面内容的屏幕区域
- 布局视口
- 视觉视口
- 理想视口 (重要) 为了使网站在移动端有最理想的浏览体验
meta视口标签的主要目的:布局视口的宽度和理想视口的宽度一致
mate视口属性
- width 设置视口宽度,一般是device-width 和设备等宽
- initial-scale 初始缩放比,大于0,一般取1.0
- maximum-scale 最大缩放比,大于0,一般取1.0
- minimum-scale 最小缩放比,大于0,一般取1.0
- user-scale 用户是否可以缩放 yes=1 no=0 一般在m站中不允许缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
二倍图
- 物理像素 代表了实际分辨率
在开发时1px不一定代表1物理像素
- 在移动端1px不等于一个物理像素(Retina屏及之后)iPhone45678都是像素比都是2.0
- 在PC端1px等于一个物理像素
压缩两倍图
- 假设有一张
100*100 px
实际像素的图 - 在css中对其样式做修改
width:50px height:50px
对背景图片缩放 background-size : 宽 高 (如果只写一个参数则为宽)
- 可以设百分比缩放,相对于父盒子
- cover (覆盖满容器,横纵比例不变)
- contain 扩大到最大尺寸(填满容器,适应容器比例)
- 假设有一张
移动端开发
- 单独建一个m站 (主流)
- 响应式布局,兼容性比较难调
- 移动端的样式初始化
normalize.css
盒子模型
- 传统模式宽度计算:盒子宽度 = width+border+padding (PC端视情况而定)
- CSS3 盒子模型 :盒子宽度 width 包含 border+padding (移动端全使用C3)
- 使用
box-sizing:border-box
让盒子变成C3盒子 - 使用
box-sizing:content-box
传统盒子
常见布局
- 注意需要设置好最大最小宽度来保证阅读体验
- vertical-align: middle; 图片垂直居中
在默认使用text-align = center 的时候图片底部贴到基线和文字对齐
单独制作移动端页面(主流) | 响应式页面兼容移动端 |
---|---|
流式布局 | 媒体查询 |
flex布局 | bootstarp |
less+rem+媒体查询布局 |