布局模式

Posted 2020-09-21 就看运气了

一：常见的布局模式

目前常见的网页布局有：固定布局，流式布局，弹性布局，响应式布局。

二：各种布局模式的布局方法，特点

1)固定布局：

网页中所有元素的尺寸一路使用px作为单位。

这种方式是最简单基础的，相信所有人在学习前端布局时都是这样搭出自己的网页的。无论对于设计还是开发人员，或者两者之间的交接，这种方式最简单直接没有异议，也没有兼容问题。但是缺点也显而易见，所有元素的大小都是写死的，这在不同尺寸的屏幕下表现出来的效果会有不同。

普通PC网站都采用这种布局。

在移动端也可以采用这种布局模式，通过viewport等比缩放手机上的页面达到适配效果。

1.在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。

 

2.设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

但是viewport的这种设置方法已经不被推荐。

2)流式布局：

网页中主要区域的宽度使用百分数设置，高度固定设置。

早期屏幕尺寸虽有不同但相差不大，这种情况下流式布局的效果没有什么问题，现在的移动端常见布局方式也都是采用流式布局。其缺点就是宽度自适应但高度无法自适应，有时设备宽度相差很大时元素会被拉伸变形，很不美观。不够灵活。

3)弹性布局：

这种布局模式在大块的划分区域的元素上依然使用百分数或px设置宽度，不同的是在包裹文字的元素上使用em或rem做单位。

早期浏览器不支持等比缩放页面尺寸，只支持缩放页面中文字的尺寸，em/rem正是根据页面font-szie大小而来的单位，所以使用这种单位设置尺寸的元素可以根据文字大小等比缩放。

在移动端也有vm，vh这样的相对于屏幕宽度高度改变的单位，用起来同样很方便。

4)响应式布局：

响应式布局的出现主要是因为CSS出现了媒体查询技术，只使用CSS就可以区分不同尺寸屏幕并应用各自对应的CSS代码，实现不同终端在一套代码下显示完全不同的结构而非仅仅是尺寸略有不同这么简单。

响应式布局通常沿用流式布局或弹性布局的布局方式，在需要区别处理的区域使用媒体查询设置不同布局样式，实现布局的响应式。

响应式布局可以实现PC与移动端公用一套代码，但是这样做的同时也有可能会造成代码臃肿，冗余大的问题，对于主打移动端体验的网站不是很好。

5)flex布局：

不知道flex布局适不适合同前几个布局模式写在一起，但是在语法上和使用方式上它确实和前几种布局模式存在很大差异，同时使用起来也很方便强大。

flex是flexible box的缩写，翻译仍为弹性布局，应用于盒模型元素，可通过CSS的flex相关属性轻松实现元素的水平与垂直方向的居中，等分，发散布局，也可以使元素宽高自动等比填充区域，控制排列方向，顺序等。也许它并不属于布局模式层级的方法，但是它确实能决绝很多布局时可能会遇到的顽疾问题。

flex布局兼容现代浏览器，所以推荐移动端使用，IE10以前没有兼容需求的PC端也可以使用。

三：布局模式总结

其实这些布局模式都是开发人员总结出来的，原本并不存在，而在工作中也并非需要一开始就固定选择某一种模式。在他们的布局方法中我们就可以看到，他们相互之间都是互通互用的，你中有我我中有你，只是各自有一些独特的特点所以才被区分出来。诞生不同的布局模式是因为要让布局更灵活，而布局的方法也是灵活的，了解各种布局方法的特性，可以解决的问题，在不同需求前使用不同方法才是最灵活的布局模式。