响应式布局由来和剖析

Posted 2020-08-05

随着移动互联网的发展盛行，各种移动设备不断备涌现，因此不同尺寸不同分辨率的终端纷纷面市，这为网络应用的前端设计提出了新的要求。如何使页面在不同端显示符合用户的浏览习惯，优化用户体验，是前端开发人员要研究的必备课题。响应式布局的概念应运而生。

什么叫响应式：

响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

 

采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、弹性布局、混合布局。 

1. 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套 尺寸； 

3. 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏 幕及浏览器宽度，并能完美利用有效空间展现最佳效果； 

4. 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽 度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

优点

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点 

1.兼容各种设备工作量大，效率低下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

媒体查询 

媒体查询是CSS代码的容器，其中的CSS只有在某些条件（比如，当前页面要被打印或者要显示在某种类型或尺寸的屏幕上）具备时才会应用。

(1)       @media规则 

第一种方式是@media规则，可以在样式表或<style>标签的CSS中包含媒体查询，

         比如：   @media print{  nav{display:none;} } 

         这条规则声明：如果当前页面要打印，那么久不显示nav元素。 

注意：这里是把CSS规则嵌套在了一个@media规则中，乍一看似乎有点不习惯。尽管可以把CSS规则嵌套在媒体查询里，但媒体查询本身却不能互相嵌套。   

         例如：   /* 只有屏幕宽度不大于568px时应用*/ 

         @mediascreen and (max-width:568px){.column{float:none;width:96%;margin:0 auto;} }  

         对这个例子而言，如果页面是通过屏幕显示，而且该屏幕宽度不炒过568像素，

那么CSS就会取消带.column类的元素的浮动，让布局区块上下堆叠，且让改元素宽度为屏幕的96%，同时在屏幕上居中。