移动端问题之布局问题

移动端问题之布局问题

1.1 区分响应式布局和移动端布局

响应式布局：是为了适配不同的终端而生的，可以实现一个网站在不同设备，如pc、平板、手机，都能正常显示
移动端布局：是针对于智能手机为主的适配，（H5站，m站）
移动端称为H5站的原因是在html5出现之前移动端的布局非常困难，出现了html5才逐渐好转了。

响应式优缺点：
优点：一个网站能够兼容多个终端，灵活性较强，能够快捷解决多设备显示适应问题。
缺点：代码量臃肿，加载时间长，不利于百度的关键词优化和排名，同时，也不利于手机版专题页单独做商业推广，这是响应式设计网站最致命的弱点

移动端优缺点：
优点：单独的移动站点会视为和PC视为两个网站对待，无论排名、流量、权重都可单独获取，有利于百度的关键词优化和排名和推广
缺点：需要开发多套界面，且对页面做的屏幕适配要求在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。遇到状况会需要改动多套代码，流程较为繁琐，相应的人力成本也会增加。

不同之处：
1、适配的群体不同，响应式适配各种终端，而移端大部分为智能手机为主
2、响应式布局能根据不同的终端设备实现不同的页面布局，而移动端布局大部分是单列布局
3、响应式布局有可能造成冗余的代码较多（传统式响应式布局，仅依赖于媒体查询，控制不同的页面布局），移动端布局冗余代码较少，对针对性较强。

相同之处：
1、在智能手机上，响应式看到的页面效果和移动端都能正常显示
2、两者都要面对适配的问题

1.2响应式布局和自适应布局

首先出现的是自适应布局，自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。这种布局的方式针对两种流派:
百分比宽度布局是：宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案。（弹性布局）
流式布局是：以Google为代表的方法，渐进增强。不过已经停止了。（栅格系统）

自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

而响应式布局是针对自适应布局的plus版，响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。这样也就说明了响应式布局是包含自适应布局的并在其基础上做出了更好的优化。（响应式布局。响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap）

最终目的：展示出来的主题内容和布局没有改变； 统一用户体验。

总结：
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

参考链接：
静态布局，自适应布局，流式布局，响应式布局，弹性布局的介绍