1.单独制作移动端页面(主流)
流式布局(百分比布局)
- 流式布局,就是百分比布局,也称为非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
- 流式布局方式是移动 web 开发使用的比较常见的布局方式。
- max-width 最大宽度(max-height 最大高度)
- min-width 最小宽度(min-height 最小高度)
常用初始化样式:
body{
margin:0 auto;
min-width:320px;
max-width:640px;
background:#fff;
font-size:14px;
font-family:-apple-system,Helvetica,sans-serif;
line-height:1.5;
color:#666;
}
flex 弹性布局(强烈推荐)
less + rem + 媒体查询布局
混合布局
2. 响应式页面兼容移动端(其次)
媒体查询
bootstrap