web前端怎么布局网页-web前端布局方法

Web前端的布局类型有这些：静态布局、流式布局、自适应布局、响应式布局;其如果只做电脑端，建议选择静态布局;如果做移动端，且设计对高度和元素间距要求不高，建议选择弹性布局。

1.静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

2.流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

3.自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

4.响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

那么我们如何布局呢?通过以下几点来选择布局。

1.如果只做电脑端，最好的选择是静态布局。

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局(rem+js)是最好的选择，通过一份css+一份js调节font-size就搞定。

3.如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

1.静态布局(static)

1.1布局特点

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

1.2.设计方法

PC设备:设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.

1.3 在移动端开发中采用静态布局的两种方式

(1)在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。

(2)设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

1.4 优缺点

优点：这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低

缺点：在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。

2.流式布局

2.1 布局特点

页面元素的宽度按照屏幕分辨率进行适配调整，页面里元素的大小会变化而但布局不变。网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用)，例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真)。

流式布局(Liquid)的特点(也叫"Fluid") 是代表作栅栏系统(网格系统)。

2.2 设计方法

使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

2.3 优缺点

优点：在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。

缺点：如果屏幕太大或者太小都会导致元素无法正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样(即，这些东西无法变得“流式”)，显示非常不协调。

1、布局风格要统一。在构建网站布局时，要注意布局的统一性。我们不仅要追求个性，还要给用户带来新鲜刺激的感觉，忽视布局的统一性。如果网站布局不统一，用户将不会对我们的网站留下深刻印象。

2、布局整齐有序。企业网站要展示的是企业的形象和产品。与展示网站不同，我们不能让花哨的布局掩盖了产品。制作企业网站时，要注意布局有序、整洁，体现企业形象和企业产品。

3、布局要有特色。企业应注重网站的个性，使网站脱颖而出。但是，我们应该考虑我们的网站是否满足用户的需求。现在很多网站在设计时都有噱头，但这并不是用户需要的，也忽略了用户的感受。

4、布局的视觉效果我们都知道，如果网站使用太多的图片或动画，会影响网站的打开速度。使用少量图片是可以的。充分利用这些图片可以达到最佳的视觉效果。在设计时，我们应该从用户的角度考虑更多，这样网站才能满足用户的需求。