大家好，今天小编来为大家解答flex布局和响应式布局这个问题，响应式布局和自适应布局很多人还不知道，现在让我们一起来看看吧！
一、HTML里面有几种布局方式
没有任何修饰的布局是自动靠左的。
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
二、页面布局有几种方法,flex布局优缺点
传统布局，屏幕宽高变化时，盒子使用横向或者竖向的滚动条来查看被遮挡部分，也就是不管浏览器窗口的大小怎么变化就按html语义标签排列的布局来布置。
css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。
页面元素的宽度按照屏幕进行适配调整，元素的位置不变，大小变化，屏幕太大或者太小导致元素不能正常显示。
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使用meta标签设置，页面元素宽度随窗口调整自动适配。主要属性及其含义如下：name="viewport"： 名称=视图；width=device-width页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)；initial-scale - 初始的缩放比例 ；minimum-scale - 允许用户缩放到的最小比例 ；maximum-scale - 允许用户缩放到的最大比例 ；user-scalable - 用户是否可以手动缩放 。
二维布局系统，随意的定义每行每列的数目和大小。也非常简单方便，兼容性较差。
三、如何做响应式布局如何做响应式布局图
响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站。可能有些人对“什么是响应式布局”还不是很了解，下面达内长沙web培训就跟大家简单说下什么是响应式布局：响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。那么响应式布局的优点和缺点又有哪些呢？优点：1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？原理：简单点说响应式布局它是通过CSS中MediaQuery（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。
vue响应式布局不仅适合PC端，移动端，还适用于各种不规则的适配器。
通过Col组件的:span属性调整Layout布局，分为24栏。
el-col:span=24>pclass=grid-contentbg-purple-dark>/p>/el-col>
通过Row组件的:gutter属性来调整布局之间的宽度
el-col:span=6>pclass=grid-contentbg-purple>/p>/el-col>
el-col:span=6>pclass=grid-contentbg-purple>/p>/el-col>
通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。
el-col:span=6:offset=6>pclass=grid-contentbg-purple>/p>/el-col>
el-col:span=6:offset=6>pclass=grid-contentbg-purple>/p>/el-col>
通过Row组件的type=flex启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有
space-between分布自适应（两边_中间，两边没有空隙）
around（中间_两边，两边会有空隙）
el-rowtype=flexclass=row-bgjustify=center>
el-col:span=6>pclass=grid-contentbg-purple>/p>/el-col>
el-col:span=6>pclass=grid-contentbg-purple-light>/p>/el-col>
参考bootstrap的响应式，预设四个尺寸
el-col:xs=8:sm=6:md=4:lg=3>pclass=grid-contentbg-purple>/p>/el-col>
el-col:xs=4:sm=6:md=8:lg=9>pclass=grid-contentbg-purple-light>/p>/el-col>
el-col:xs=4:sm=6:md=8:lg=9>pclass=grid-contentbg-purple>/p>/el-col>
el-col:xs=8:sm=6:md=4:lg=3>pclass=grid-contentbg-purple-light>/p>/el-col>
今后可以使用i>来做图标，给其class添加el-icon-iconName即可。
响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
四、自媒体查询、flex弹性布局、响应式布局及 rem 布局
1、 自媒体查询、rem布局、响应式布局技术，是三个不同的技术。自媒体查询常用在适配不同的设备显示场景下，根据屏幕大小显示不同页面，但功能大致不变的这么一个技术。 rem布局它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的（根元素字体大小= 1rem）。响应式布局它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化（响应式布局和自媒体查询有区别）。在如今复杂的开发中这几个技术越来越密不可分，在项目中可以通过实际需求进行搭配。
2、 功能：自媒体查询主要是设置不同的设备屏幕下的显示样式。
3、 获取浏览器或设备宽度：
4、 min-device-width（设备的宽度）\ min-width (浏览器的宽度) （注释：也可以获取高度，就是将width改写成height）
5、 方法：
6、
7、 功能： 就是使用flex对页面进行布局，也可以是响应式的。
8、 方法： 一下方法为flex常用方法，具体学习可以点击链接 flex布局
9、 概念：指相对跟元素的字体大小的单位。（补充：rem于em的区别一个是以根元素字体大小为参考，em是以父级元素为参考）
10、 使用方法：
11、 一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。
12、布局特点：不同设备对应不同的HTML或者局部自适应。（不同的设备不同的页面）
13、 布局特点：确保一个页面在所有终端上，都能显示出令人满意的效果。（一套方案，处处运行。）
14、 设计思路：使用自媒体查询及用%或 rem作为单位，对不同视口设备进行编写样式。
15、 布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等比换算。（一套方案，是不同尺寸、分辨率的视口呈现出较好的效果。）
16、 设计思路：使用自媒体查询及用%或 rem作为单位，对不同视口设备进行编写样式。
17、 在项目开发中，根据项目的实际情况选择不同的技术的搭配，这样才能实现业务的效果。
好了，关于flex布局和响应式布局和响应式布局和自适应布局的问题到这里结束啦，希望可以解决您的问题哈！
