前端常见的布局方案
一、静态布局(Static Layout)
1. 布局概念
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
二、流式布局(Liquid Layout)
1. 布局概念
流式布局也叫百分比布局
这边引入一下自适应布局:
分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。为网页设置一个相对的宽度，通常以百分比作为长度单位。
流式布局常用的设计模板:
左侧固定+右侧自适应
左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
三、弹性布局(Flex Layout)
1. 布局概念
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。
四、响应式布局(Responsive layout)
采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局
现在优秀的页面都追求一套代码可以实现三端的浏览;
从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
注意：以上几种布局方式并不是独立存在的，实际开发中往往是相互结合使用的
这里详细讲解一下响应式布局
响应式布局，就是实现不同屏幕在不同屏幕分辨率的终端上浏览网页的不同展示方式
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验，如下图：
如上图所示，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用 媒体查询 可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
2、响应式布局的缺点
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。
3、屏幕尺寸的划分
一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示
| 类型 | 布局宽度 |
| 大屏幕 | 1200px以上 |
| 中屏 | 992px-1200px |
| 小屏 | 768px-992px |
| 超小屏 | 768px以下 |
4、媒体查询
参考链接：http://www.runoob.com/cssref/css3-pr-mediaquery.html
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
CSS 语法：
@media mediatype and|not|only (media feature) {
/*CSS-Code*/
}
/*或者引入不同样式文件的判断：当满足某个条件的时候，引入mystylesheet.css样式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
mediatype 取值:
- all 用于所有设备
- print 用于打印机和打印预览
- screen 用于电脑屏幕，平板电脑，智能手机等。
- speech 应用于屏幕阅读器等发声设备
and|not|only：
- and 同时满足，相当于 &&；
- not 取反（一般写在 mediatype 前面）
示例：
<style>
body{
background-color: red;
}
/* 不在768-992之间的时候，设置背景颜色为蓝色*/
@media not screen and (min-width: 768px) and (max-width: 992px){
body{
background-color: blue;
}
}
</style>
media feature 取值：
- device-height 定义输出设备的屏幕可见高度。
- device-width 定义输出设备的屏幕可见宽度。
- max-device-height 定义输出设备的屏幕可见的最大高度。
- max-device-width 定义输出设备的屏幕最大可见宽度。
- min-device-width 定义输出设备的屏幕最小可见宽度。
- min-device-height 定义输出设备的屏幕的最小可见高度。
- max-height 定义输出设备中的页面最大可见区域高度。
- max-width 定义输出设备中的页面最大可见区域宽度。
- min-height 定义输出设备中的页面最小可见区域高度。
- min-width 定义输出设备中的页面最小可见区域宽度。
min-width 与 min-device-height 的区别
device 表示的是设备，所以加了 device 的 范围取值表示的是设备的宽度范围。
在移动端，由于通过模拟器改变的是移动端设备的宽度，所以 min-width 与 min-device-height 效果一样；
在 PC 端，如果改变浏览器的宽度，而我们电脑的宽度并没有改变，所以设备的宽度一定，最终的效果就是只有一个范围起作用。
案例：控制不同屏幕尺寸下屏幕背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
width: 1000px;
margin: 0 auto;
height: 1000px;
background: pink;
}
/*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/
/*怎么使用媒体查询：关于媒体查询 @media */
/*语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}*/
@media screen and (max-width: 768px) {
/*1. 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色*/
.container{
width: 100%;
background: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
/*2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色*/
.container{
width: 750px;
background: green;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
/*3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色*/
.container{
width: 970px;
background: red;
}
}
@media screen and (min-width: 1200px){
/*4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色*/
.container{
width: 1170px;
background: yellow;
}
}
</style>
</head>
<body>
<!--
响应式容器：
1. 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色
2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色
-->
<div class="container"></div>
</body>
</html>
1406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
