移动端常见布局及主流方案

1. 移动端单独制作

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
  操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分
• less+rem+媒体查询布局
• 混合布局

2. 响应式

• 媒体查询
• bootstarp

3. 流式布局：

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

移动端主流方案

1.单独制作移动端页面（主流）

• 通常情况下，网址域名前面加 m(mobile)可以打开移动端。
• 通过判断设备，如果是移动设备打开，则跳到移动端页面。
• 也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站

2.响应式页面兼容移动端（其次）

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配

三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。

缺点：制作麻烦， 需要花很大精力去调兼容性问题