对于一些常用布局的总结（着重于响应式布局）:

这篇文章是对于一些常用布局的总结（着重于响应式布局）:

---

• 静态布局（Static Layout）:

即传统Web设计，对于 PC 设计一个 Layout ，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

• 弹性布局 (Flex) :

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。你可以把自适应布局看作是静态布局的一个系列。就是说你看到的页面，里面元素的位置会变化而大小不会变化；

• 流式布局（Liquid Layout）:

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

• 响应式布局（Responsive Layout）:

响应式布局（Responsive Layout）是分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

响应式布局步骤

---

• 布局及设置 meta 标签:

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。可以 先写非响应式布局，页面固定宽度大小，完成了非响应式在去 添加媒体查询（Media Query) 和 响应式代码。user-scalable 属性能够解决 ipad 切换横屏之后触摸才能回到具体尺寸的问题。

//当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。

//这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="HandheldFriendly" content="true">

• 通过媒体查询来设置样式 media query : 详细语法链接

媒体查询：可以让我们根据设备显示器的特性《如视口宽度，屏幕比例，设备方向：横向或者纵向--》为其设定CSS样式;

@media screen and (max-width:980px) {
						
#head { … }
						
#content { … }
						
#footer { … }
						
}

注意: -->这里面的样式会覆盖掉之前所定义的样式。

• 设置多种视图宽度:

假如我们要兼容 ipad 和 iphone 视图，我们可以这样设置:

/**ipad**/
						
@media only screen and (min-width:768px)and(max-width:1024px){} <br>
						
/**iphone**/
						
@media only screen and (width:320px)and (width:768px){}

• 字体设置

到目前为止，开发人员用到的字体单位大部分都是 像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。 css3引入了新的单位叫做rem,和em类似但对于Html元素，rem 更方便使用。rem 是相对于根元素的，不要忘记重置根元素字体大小;