响应式布局、移动端布局，有什么区别？-H5教程-PHP中文网

响应式布局、移动端布局，有什么区别？

php中文网

发布： 2016-06-07 08:44:08

原创

2107人浏览过

对这些概念不是很清楚。以我的理解，pc端的网页布局一般div是固定的宽度，响应式布局现在大多数是根据访问设备的宽度分别显示不同的css，个人觉得这样太麻烦了，至少要写3个不同的css，到底怎么样才算是移动端布局？如果只写一个css，而适应不同的屏幕，自适应性的布局该怎么做？

cqcms通用企业建站(PC+wap)2.9

cqcms通用企业建站介绍苍穹企业网站管理系统(CQCMS)软件是国产PHP网站内容管理系统：CQcms内容管理系统，它将成为您轻松建站的利器。模板全部使用文件形式保存，对用户设计模板、网站升级转移均提供很大的便利，健壮的模板标签为站长DIY自己的网站提供了强有力的支持。MVC框架，自定义标签，模板文件修改非常方便，PC+WAP响应式布局，一个域名，自动识别终端，一个后台同时管理PC和wap。

查看详情

回复内容：

响应式布局是为了适配不同的终端而生，移动端布局是针对于智能手机为主，也就是现在行内常说的H5站（m站）。简单说一下他们的不同之处：

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

相同之处：

1、在智能手机上，响应式看到的页面效果能和移动端的一样效果（其他忽略，仅从效果上而言）
2、两者都要面对适配的问题（这也是较为蛋疼的问题）响应式布局 = pc布局 + 移动端布局响应式布局就是响应式设计方案呈现的效果。具体就是页面的布局会根据不同设备的显示面积（主要是宽度）的不同而呈现不同的布局，这个效果是比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现的布局更灵活，可读性更强。当然对研发的要求也更高（比如说如何更好地让图片，适配，UI动画自适应各种布局）。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。对应的样式文件可能是多个，也可以只写一个（在一个css文件声明不同的media query就可以）。

移动端布局就是传统的固定宽度或者弹性布局的设计方案呈现的效果。一般来说，这个布局设计开发都比较简单，同时设计的效果可以更精细，细节更丰富。不过不好的地方就是如果要适应很多不同的设备，就需要设计多套设计方案，或者让比较小屏的方案去适应多个大屏，适应的效果上可能不是特别好。

响应式设计方案的一般的做法就是根据目标用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间，比如说小屏的手机分分辨率可以设定为[320,640]。然后分别设计每种布局即可，一般来说，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽量减少用户适应成本）。所谓响应式就是你的网页根据不同的浏览器分辨率的大小来进行缩放，只需要在 style 文件里面多写一些媒体查询的 css 罢了。

或者专门针对移动端来写也可以，就是说只对移动端起作用。比如爱范儿 · Beats of Bits 就是这么干的。

两者各有优缺点，看你怎么取舍了。响应式布局:一套代码通用所有设备，通常使用媒体查询断点改变布局，使用百分比布局的方式，文字流式，更好的把控布局，但是要在开发之初就考虑到一个模块在所有设备下的布局显示情况。

移动端布局:通常移动端布局使用viewport控制rem适配的方式，所以移动端可以说是所有设备上显示效果基本一致，而响应式布局在不同设备上的显示就大相径庭了。
http://www.chengfeilong.com/mobile-layout h5响应式原理？