移动端响应适设计

向右看齐 2022-06-17 08:16 104阅读 0赞

\-**最近在学习移动端的响应适布局，收集些系统的干货在博客备用。**

响应式布局就是响应式设计方案呈现的效果。具体就是页面的布局会根据不同设备的显示面积（主要是宽度）的不同而呈现不同的布局，这个效果是比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现的布局更灵活，可读性更强。当然对研发的要求也更高（比如说如何更好地让图片，适配，UI动画自适应各种布局）。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。对应的样式文件可能是多个，也可以只写一个（在一个css文件声明不同的media query就可以）。

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

响应式设计方案的一般的做法就是根据目标用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间，比如说小屏的手机分分辨率可以设定为\[320,640\]。然后分别设计每种布局即可，一般来说，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽量减少用户适应成本）。

不同之处：

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

相同之处：

1、在智能手机上，响应式看到的页面效果能和移动端的一样效果  
2、两者都要面对适配的问题

rem自适应布局：[https://segmentfault.com/a/1190000007276635][https_segmentfault.com_a_1190000007276635]

关于webapp自适应  
[http://www.myronliu.com/2016/05/14/webapp/webapp\_mobile\_page/][http_www.myronliu.com_2016_05_14_webapp_webapp_mobile_page]

[https_segmentfault.com_a_1190000007276635]: https://segmentfault.com/a/1190000007276635
[http_www.myronliu.com_2016_05_14_webapp_webapp_mobile_page]: http://www.myronliu.com/2016/05/14/webapp/webapp_mobile_page/