响应式布局过时了吗？

ゝ一世哀愁。 2022-03-29 03:44 350阅读 0赞

## 响应式布局 ##

> Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。  
> ![界面不同的浏览][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

## 响应式布局不是趋势？ ##

我们看到大型电商，直播平台，问答类网站，都会开发一套PC端和一套独立的移动端，比如 [某东桌面端][Link 1] (某东移动端)\[[https://m.jd.com][https_m.jd.com]\]，还有一些小型网站…

--------------------

1.  .响应式设计仅是改善移动体验并没达到最优化  
    [http://www.mdcraftbeerfestival.com/][http_www.mdcraftbeerfestival.com]  
    ![PC][]  
    ![移动端][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]  
    这个网站设计是非常漂亮，有视觉冲击，界面简洁美观；但是大部分网站都是移动端明显将在一些内容隐藏，对移动端是很不友好，有些甚至可能是产品，而且可以看到可视区域变小，字体都挤一起，页面拉长，排版顺序错乱。
2.  代码相对复杂，加载慢  
    我们可以看到代码很多都是重复的，针对性不强；要兼容各种终端，开发效率低了很多；写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。加载慢，用户体验就是个问题了。
3.  网站搜素权重是个问题  
    百度对移动网站和电脑网站的关键词处理策略也不相同，而对于响应式的方案，不同终端访问到的网页代码是一样的，这样就不能在电脑端和移动端设置不同的关键词。
4.  折衷性质的设计解决方案  
    多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况.

## 响应式布局依旧是前端必要的 ##

#### 应用 ####

1.  在大型电商网站，基本都是特定开发一套适配移动端的，因为移动设备的普遍，很多人都是直接用手机进行购物。所以需要对移动端很友好，而且需要的交互操作也比较多。但是，响应式现在依旧是趋势，上面只是响应式布局的缺点和局限性。不是它不应存在。
2.  响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。比如该响应式网站：[https://colly.com/][https_colly.com]
3.  针对一些新建站的网站，要求适配移动端，所以选择响应式设计，就一套页面兼容各种终端，很灵活
4.  解决了设备之间的差异化展示，能够快捷解决多设备显示适应问题。  
    **所以，响应式设计依旧是有很多应用场景，我们要根据需求来选择，选择真正适合我们网站的布局**

#### 原则 ####

1.  移动设备优先：在设计初期就要考虑页面如何在多终端显示
2.  渐进增强：充分发挥硬件设备的最大功能。例如IE6、7、8不支持css3的属性，需要用js实现响应式布局，但是对于高级浏览器，我们就可以使用css3来实现，充分发挥浏览器的性能（你的浏览器越强，你看到的效果就越好，用户体验越好。）

#### 优点 ####

1.  面对不同分辨率设备灵活性强。
2.  能够快捷解决多设备显示适应问题。

#### 缺点 ####

1.  兼容各种设备工作量大，效率低下。
2.  代码累赘，会出现隐藏无用的元素，加载时间加长。

#### 原理 ####

1.  **媒体查询:** 查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
2.  **方式：** 通过查询screen的宽度来指定某个宽度区间的网页布局。  
    超小屏幕 （移动设备） w<768px  
    小屏设备 768px-992px 768 <= w <992  
    中等屏幕 992px-1200px 992 =< w <1200  
    宽屏设备 1200px以上 w>=1200

## 自适应布局 ##

自己根据屏幕宽度的改变而改变（典型的写法不需要media判断，直接让每个元素通过相对的宽度，比如百分比、vh、em 、rem等来改变容器的大小，文字的大小）。自适应布局等于使用固定分割点来进行布局。  
比如现在移动端主流的设备是分割点，我们可以使用less等根据各种主流设备来实现自适应布局

@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;

## 总结 ##

根据需求再选择适合我们网站的布局，技术才是最优的。响应式布局依旧是前端工程师必须掌握的。使用响应式我们要根据其原则，扬长避短。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220329/22598a944abe482f84e16a3f2495ee19.png
[Link 1]: https://www.jd.com
[https_m.jd.com]: https://m.jd.com
[http_www.mdcraftbeerfestival.com]: http://www.mdcraftbeerfestival.com/
[PC]: /images/20220329/23196fc72d774a7c9181a53a6007a324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220329/924cd7b9a5b74026beb1d29eb9959ec6.png
[https_colly.com]: https://colly.com/