固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳

小灰灰 2021-09-29 14:06 694阅读 0赞

**关于web页面布局，首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)****、响应布局(responsive layout)和相应的使用技巧？**

### **固定布局(fixed layout)** ###

固定布局，例如豆瓣网，无论如何change浏览器的宽度，**页面主体区域的宽度是固定不变了**，里面的内容布局也是打死不动的；

> 利
> 
> 1.  任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少（**设计师看到什么，用户看到的就是什么**）。
> 2.  **不用设定min-width（最小宽度）和max-width（最大宽度）**，这两个属性并不被所有浏览器支持。
> 3.  即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。
> 
> 弊
> 
> 1.  **固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白**，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。
> 2.  小屏幕上可能会出现水平滚动条，影响用户体验。
> 3.  无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。
> 4.  总体来说，固定宽度的可用性更低。

> **使用技巧：**
> 
>  *  1024×768以及更高分辨率的屏幕选择960px作为网页内容主容器的像素宽度，还能有一点留白。而800×600分辨率下的主容器最佳显示宽度是760px，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。
>  *  固定宽度设计，务必保证**主容器居中对齐**，以保持平衡（一般利用margin: 0 auto;就可以了）。

### **流体布局(fluid layout)** ###

流体布局，也称为**自适应布局****布局**，**宽度使用了百分比宽度来适应不同屏幕分辨率，高度大都是用px来固定住**。例如google analytics，当你change浏览器的宽度，显示区域也会如同水流般自适应于显示器的宽度显示（浏览器宽度变一点，web页面宽度也跟着变一点），主体结构布局不变。**开发中一般通过调整内容区块的宽度来适应，或调整空白区域大小来适应不同分辨率**。

> **利**
> 
> 1.  流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。
> 2.  在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。
> 3.  如果设计得当，流动布局能避免在小屏幕上的水平滚动条。
> 
> **弊**
> 
> 1.  设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕调试，也更不容易发现潜在问题。
> 2.  图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。
> 3.  对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。
> 4.  因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

> **使用技巧：**
> 
>  *  采用简单设计：应用到流动网页布局的**图案和复杂技巧**越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。
>  *  min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。

### **弹性布局(elastic layout)** ###

其**要点就在于使用单位em或rem来定义元素宽度**。**em/rem则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。**

> 利
> 
> 1.  如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。
> 2.  可以用于字体缩进text-indent；**使用rem单位的弹性布局****在移动端也很受欢迎；**
> 
> 弊
> 
> 1.  尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。
> 2.  这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。
> 3.  由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整  ；
> 4.  **REM****支持的浏览器：**Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

> **使用技巧：**
> 
>  *  **包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）**。
>  *  浏览器的默认字体高度一般为`16px`，即1em=1rem=16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面根节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px\*62.5%=10px。这样1rem便是10px，方便了计算。。

> **注意：实际项目设置成 font-size: 62.5%可能会出现问题，**如下
> 
>     html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
>     body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
>     h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
> 
> 因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 \* 62.5% 得到我们需要的10px。
> 
> 因为**chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算**，导致chrome的em/rem计算不准确。针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
> 
>     html {font-size: 625%;/*字体换算为1rem=100px*/}
>         body {font-size:0.1rem;/*全文基础字体0.1rem = 10px */}
>         h2 { font-size: 0.24rem;/*0.24 × 100px = 24px*/}

## ##

### **响应布局(responsive layout)** ###

随着**宽屏的不断普及，CSS3出现了@media媒体查询技术，又出现了响应式设计的概念**。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但**通常是糅合了百分比流式布局+rem弹性布局，再搭配媒体查询技术使用**。响应式几乎已经成为优秀页面布局的标准。

响应布局是浏览器的宽度满足某一个条件的时候，web页面的布局发生变化。这种变化往往不仅仅是web页面宽度的变化，还有主体结构布局的改变。例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。如京东商城的首页。

@media (min-width: 768px){ //>=768的设备 }
    @media (min-width: 992px){ //>=992的设备 }

> 利
> 
> 1.  适应pc和移动端，如果足够耐心，效果完美
> 
> 弊
> 
> 1.  媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
> 2.  要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

> **布局特点：**屏幕分辨率变化时，页面里面**元素的位置会变化而大小不会变化**。流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。
> 
> **使用技巧：****通常是糅合了百分比流式布局+rem弹性布局，再搭配媒体查询技术使用**。——使用** **@media 媒体查询给不同尺寸和介质的设备切换不同的样式，分别为不同的屏幕分辨率定义布局。同时，在每个布局中，主区域划分应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

响应式布局具体实践看上一篇文章：[https://blog.csdn.net/zhouzuoluo/article/details/95756442][https_blog.csdn.net_zhouzuoluo_article_details_95756442]

### **选择何种布局方式** ###

选择何种布局应该**由网站的性质决定**。权衡上述利弊，根据你的网站需求找到合适的解决方案，如以下选择：

1、如果只实现pc端**简单设计**，那么静态固定布局（定宽度）是最好的选择。

2、如果做**移动端，且设计对高度和元素间距要求不高**，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3、一些特定的界面可以使用**主区域流动+侧边栏固定+一些弹性应用** 来很好的实现。

4、如果pc，**移动要兼容，而且要求很高那么响应式布局**还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

学习网址：  
[https://www.cnblogs.com/yanayana/p/7066948.html][https_www.cnblogs.com_yanayana_p_7066948.html]

[https://www.cnblogs.com/MirageFox/p/6754791.html][https_www.cnblogs.com_MirageFox_p_6754791.html]

[https_blog.csdn.net_zhouzuoluo_article_details_95756442]: https://blog.csdn.net/zhouzuoluo/article/details/95756442
[https_www.cnblogs.com_yanayana_p_7066948.html]: https://www.cnblogs.com/yanayana/p/7066948.html
[https_www.cnblogs.com_MirageFox_p_6754791.html]: https://www.cnblogs.com/MirageFox/p/6754791.html