对于现在的网站来说，一个网站是由多个网页构造的整体。有的页面会多一些，有的页面会少一些，但是在网页布局中，有许多差异的格式。这个也是依据网站的需求，进行设计的。可以说页面设计的好坏，直接关系到网站的整体功效。
一、静态布局（static layout） 1布局特色 不管阅读器尺寸具体是多少，网页布局始终依照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-th，这样的话，假如小于这个宽度就会显露滚动条，假如大于这个宽度则内容居中外加底细，这种设计常见于pc端。 2设计想法 PC：居中布局，所有样式采用绝对宽度高度(px)，设计一个Layout，在屏幕宽高有调换时，采用横向和竖向的滚动条来查阅被遮掩部门。 移动器材：另外建立移动网站，单独设计一个布局，采用差异的域名如ap或m。 好处：这种布局方式对设计师和CSS编写者来说都是最简朴的，亦没有兼容性疑问。 瑕疵：显而易见，即不能依据用户的屏幕尺寸做出差异的表现。当前，大部门门户网站、大部门企业的PC宣传站点都使用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简朴设法。但这种想法不是一种彻底兼容未来网页的制作想法，我们需要一些安适未知器材的想法。 二、流式布局（Liqu Layout） 流式布局（Liqu）的特色（也叫Flu) 是页面元素的宽度依照屏幕区分率进行适配调换，但整体布局不变。典型作栅栏系统（网格系统）。 网页中主要的划分区域的尺寸采用百分数（搭配min-*、max-*属性采用），例如，设置网页主体的宽度为80，min-th为960px。图片也作相似处置（th100, max-th一般设定为图片本身的尺寸，防范被拉伸而失真）。 1 布局特色 屏幕区分率变化时，页面里元素的大小会变化而但布局不变。【这就导致假如屏幕太大或者太小都会导致元素无法正常显示。 2 设计想法 采用百分比定义宽度，高度大都是用px来固定住，可以依据可视区域 (vieport) 和父元素的实时尺寸进行调换，尽可能的安适各种区分率。往往配合 max-thmin-th 等属性管理尺寸流动范畴以免过大或者过小阴碍浏览。 这种布局方式在Web前端开发的早期历史上，用来应对差异尺寸的PC屏幕（那时屏幕尺寸的不同不会太大），在当今的移动端开发也是常用布局方式，但瑕疵显著：主要的疑问是假如屏幕标准跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。由于宽度采用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示功效会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不调和。 三、自安适布局（Adaptive Layout） 自安适布局的特色是差别为差异的屏幕区分率定义布局，即创造多个静态布局，每个静态布局对应一个屏幕区分率范畴。变更屏幕区分率可以切换差异的静态局部（页面元素位置产生变更），但在每个静态布局中，页面元素不随窗口大小的调换产生变化。可以把自安适布局看作是静态布局的一个系列。 1布局特色 屏幕区分率变化时，页面里面元素的位置会变化而大小不会变化。 2设计想法 采用 media 媒体查询给差异尺寸和介质的器材切换差异的样式。在优秀的响应范畴设计下可以给适配范畴内的器材最好的体会，在同一个器材下实际还是固定的布局。 四、响应式布局（Responsive Layout） 跟着CSS3显露了媒体查询专业，又显露了响应式设计的概念。响应式设计的目的是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web阅读器等等）都能显示出令人满意的功效，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询专业采用。——差别为差异的屏幕区分率定义布局，同时，在每个布局中，利用流式布局的理念，即页面元素宽度跟着窗口调换而自动适配。即：创造多个流体式布局，差别对应一个屏幕区分率范畴。可以把响应式布局看作是流式布局和自安适布局设计理念的混合。 响应式几乎已经成为优秀页面布局的尺度。 1 布局特色 每个屏幕区分率下面会有一个布局样式，即元素位置和大小都会变。 2 设计想法 媒体查询+流式布局。通常采用 media 媒体查询 和网格系统 (Gr System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述专业通过 CSS 给单一网页差异器材返回差异样式的专业统称。 好处：安适pc和移动端，假如充足忍耐，功效美好。 瑕疵：（1）媒体查询是有限的，也就是可以枚举出来的，只能安适主流的宽高。（2）要匹配充足多的屏幕大小，任务量不小，设计也需要多个版本。 响应式页面在头部会加上这一段代码： 五、弹性布局（remem布局） 1 remem区别：rem是相对于元素的font-size大小而言的，而em是相对于其父元素。 2 采用 em 或 rem 单位进行相对布局，相对百分比更加敏捷，同时可以支持阅读器的字体大小调换和缩放等的正常显示，由于em是相对父级元素的原因没有得到推销。【中国站点制作网页的时候，习惯用CSS强制定义字体大小，保证每个人都看到一致的功效，包括网易、搜狐这些门户网站在内的大部门站点，用的都是绝对单位px（像素）。但是，假如从网站易用性方面斟酌，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，盘踞大部门阅读器市场的IE无法调换那些采用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部门外国站点已经采用em作为字体单位。 3 这类布局的特色是，包裹文字的各元素的尺寸使用emrem做单位，而页面的主要划分区域的尺寸仍采用百分数或px做单位（同「流式布局」或「静态固定布局」）。早期阅读器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种场合下。采用emrem做单位，可以使包裹文字的元素跟着文字的缩放而缩放。 4 阅读器的默认字体高度一般为16px，即1em16px，但是 116 的比例不便捷计算，为了使单位emrem更直观，CSS编写者经常将页面跟节点字体设为625，比如抉择用rem管理字体时，先需要设置根节点的字体大小，由于阅读器默认字体大小16px*625=10px。这样1rem便是10px，便捷了计算。 5 用emrem定义尺寸的另一个优点是更能安适缩进以字体单位padding或margin／阅读器设置字体尺寸等场合（由于emrem相对于字体大小，会同步变更）。例如：p{ text-indent 2em; }。 6 采用rem单位的弹性布局在移动端也很受欢迎。 7 其实在移动端采用所谓的弹性布局，是对照勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（依据屏幕尺寸）调换页面的各元素的尺寸、文字大小时对照好用。其实，采用v、vh等后起之秀的单位，可以实现美好的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必须了。 六、结论 1假如只做pc端，那么静态布局（定宽度）是最好的抉择。 2假如做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的抉择，一份css+一份js调节font-size搞定。 3假如pc，移动要兼容，而且要求很高那么响应式布局还是最好的抉择，前提是设计依据差异的高宽做差异的设计，响应式依据媒体查询做差异的布局。
meta name=applicable-device content=pc,mobilemeta -equiv=Cache-Control content=no-transform