Web开发之Layout布局

布局种类：

页面布局的几种方式（静态化布局、流式布局、自适应布局、响应式布局、弹性布局）

使用建议：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

一、静态布局（static layout）

传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话：

1、如果小于这个宽度就会出现滚动条。
2、如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=zh-cn

2、设计方法

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.根据浏览器用户代理，识别移动端，并重定向。

PC端自适应设计详情参考