Web前端开发工程师必会的网页布局方法

myzbx 2024-12-09 15:35 47 浏览

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 优缺点
优点：这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低
缺点：在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。

1.5 总结
目前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

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来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

2.4 总结
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)，典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。流式布局，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

3.自适应布局
为不同的屏幕分辨率定义的布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

3.1 布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

3.2 设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

一列布局（静态布局）：一列自适应居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列布局：一列自适应居中</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
.container {
width:600px;
height:100%;
margin:0 auto;
background:gray;
border:1px red solid;
}
</style>
</head>
<body>
<div class="container"> 页面</div>
</body>
</html>

两列布局：一列固定宽+一列自适应

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局：一列固定宽，一列自适应</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
aside, .main {
height:100%;
border:1px red solid;
}
aside {
background:#0FF;
float:left;
width:200px;
}
.main {
margin-left:210px;
background:#CC3;
}
</style>
</head>
<body>
<aside>边栏导航</aside>
<div class="main">主体box</div>
</body>
</html>

三列布局：中间列自适应宽+左右列固定宽(一般使用圣杯布局和双飞翼布局)
三列一般分别是子列、主列和附加列，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。
圣杯布局:

<div class="container"> 
    <div class="main"></div> 
    <div class="sub"></div> 
    <div class="extra"></div> 
</div>
.container { 
    padding-left: 210px;
    padding-right: 190px;
}
.main { 
    float: left; 
    width: 100%;
    height: 300px;
}
.sub { 
    position: relative; 
    left: -210px;
    float: left; 
    width: 200px;
    height: 300px;
    margin-left: -100%;
}
.extra { 
    position: relative; 
    right: -190px;
    float: left; 
    width: 180px;
    height: 300px;
    margin-left: -180px;
}

双飞翼布局:

<div class="main-wrapper"> 
    <div class="main"></div> 
</div>
<div class="sub"></div> 
<div class="extra"></div> 
.main-wrapper { 
    float: left; 
    width: 100%;
}
.main { 
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5); 
}
.sub { 
    float: left; 
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5); 
}
.extra { 
    float: left; 
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5); 
}

两种布局方式都是把主列放在文档流最前面，使主列优先加载。相同之处，都是让三列浮动，然后通过负外边距形成三列布局。不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。

4.响应式布局
针对越来越多的移动端设备，一个web设计能够兼容多个终端。通过CSS3中的Media Query（媒介查询），采用栅格化方式，分别为不同的屏幕分辨率定义布局。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

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

4.2 设计方法
媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

4.3 优缺点
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

4.4 总结
响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

5.弹性布局（rem/em布局）
响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。其实rem布局的本质是等比缩放，一般是基于宽度。

5.1 布局特点
弹性布局采用的单位是em或者rem，为了直观，所以直接采用了单位缩写去区分。em和rem是一个相对长度单位，页面内各元素的尺寸采用em/rem做单位，em是相对其父元素大小，rem是始终相对于html大小，即页面根元素。

5.2 设计方法
首先，设置rem单位所代表的尺寸大小和屏幕宽度成正比，有3中方案,先不必纠结其中的数值：
（1）媒体查询, 设定每种屏幕对应的font-size

@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 红米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}

（2）js设置html的font-size大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

（3）使用vw设置，vw也是一个相对单位，100vw等于屏幕宽度

html{
    font-size: 10vw;
}

这3种方式，都可以设置html的font-size和屏幕宽度成正比。这3种的单位是css尺寸,无论第一种方法的min-width还是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言。第一种，需要设置需要每种屏幕都设置对应的font-size,这些font-size都是根据比例算出来的，比较繁琐，而且还有可能漏掉某些屏幕尺寸，不推荐。第二种用js设置，比较方便，现在大部分网站采用这种方式。第三种通过css的vw来设置，也很方便，而且不用写css，但是兼容性还不是特别好。综合推荐使用第二种。

5.3 优缺点
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

5.4 总结
使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配；
容器元素的字体大小都不使用rem，需要额外的media查询；大部分情况下都可以用rem布局这个方法，只有底部的导航不用rem，而是用的flex布局。因为导航点击最多，所以给它一个固定的大小（其实就是高度固定，宽度自适应的方案），底部导航和顶部搜索框用的高固定，宽度自适应的方案，其余的部分基本都是随着浏览器宽度变化在等比例缩放.

6.flex 布局
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。flexbox布局与方向无关，不同于常规布局。
6.1 布局特点
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
6.2 容器的属性

6.3 项目的属性

6.4 总结

Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

HTML 布局

上一篇：手把手教你CSS grid布局「香」
下一篇：教你初步了解响应式网页设计

Web前端开发工程师必会的网页布局方法

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿