前端页面布局

前端布局的几个概念

我今天学习了几种布局的方式，大概有五种，静态布局，自适应布局，弹性布局，流式布局，响应式布局。

静态布局

给页面元素设置固定的宽度，高度，单位用px，当窗口缩小时，会出现滚动条，针对不同分辨率的手机端，分别写入不同的样式文件。
例子：
这就是典型的静态布局，缩小时有滚动条。

自适应布局

创建多个静态布局，每个静态布局对应一个屏幕分辨率，使用@media媒体查询技术为不同分辨率定义布局，我们看到的页面，里面的元素位置会变化而大小不变。
例子：亚马逊
PC端：

记住现在的域名

下面是移动端：

域名是没有变的，说明是一个网站，（这个一会看一下有写两套代码的，和这个不一样），在移动端显示的就适应手机屏幕分辨率。
有的网站在pc端和移动端就是两个域名，相当于两个网站
大街网的pc端显示：

大街网移动端显示：

这个就不是自适应布局，它在pc端是静态布局在移动端是自适应布局。

弹性布局

例子：

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/mobile-responsive-example.html
来源:http://caibaojian.com

它的页面有一个特点，就是：

顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。
见：https://www.cnblogs.com/jerehedu/p/7358329.html

流式布局

页面元素的宽度按照屏幕进行适配调整，元素的大小会变化，位置不会变化，宽度是百分比，高度按px写。
瀑布流式的页面布局适于应用在社区类浏览型页面中，这样的页面往往信息量大，采用瀑布流式布局浏览体验更为流畅。但缺点则是信息不能完全被关注，容易漏读信息。
转自：
https://www.chinaz.com/web/2017/0210/655519.shtml

使用页面 左侧固定+右侧自适应 左右固定宽度+中间自适应

响应式布局

可以把响应式布局看做是流式布局和自适应布局设计理念的融合
最常见的响应式框架就是bootstrap
例子：CSDN

很明显引入了bootstrap框架。
bootstrap的学习见：http://www.runoob.com/bootstrap/bootstrap-tutorial.html