前端必知必会-html布局和响应式网页设计

news2024/11/21 0:13:30

文章目录

HTML 布局
CSS 框架
CSS 浮动布局
CSS flex布局
CSS 网格布局
HTML 响应式网页设计
设置viewport
响应式图像
使用 max-width 属性
根据浏览器宽度显示不同的图像
响应式文本大小
媒体查询
Bootstrap
总结

HTML 布局

html布局

HTML5 有几个语义元素，它们定义网页的不同部分：
<header> - 定义文档或部分的页眉
<nav> - 定义一组导航链接
<section> - 定义文档中的部分
<article> - 定义独立的、自包含的内容
<aside> - 定义除内容之外的内容（如侧边栏）
<footer> - 定义文档或部分的页脚
<details> - 定义用户可以根据需要打开和关闭的其他详细信息
<summary> - 定义元素的标题

有四种不同的技术可以创建多列布局。每种技术都有其优缺点：

CSS 框架
CSS 浮动属性
CSS 弹性框
CSS 网格

CSS 框架

快速创建布局可以使用 CSS 框架，如 Bootstrap。

CSS 浮动布局

通常使用 CSS 浮动属性进行整个网页布局。浮动需要记住浮动和清除属性的工作原理。缺点：浮动元素与文档流绑定，这可能会损害灵活性。

CSS flex布局

使用flex布局可确保当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测。

CSS 网格布局

CSS 网格布局模块提供基于网格的布局系统，包含行和列，可让您更轻松地设计网页，

HTML 响应式网页设计

响应式网页设计将自动调整以适应不同的屏幕尺寸和视口。

什么是响应式网页设计？
响应式网页设计就是使用 HTML 和 CSS 自动调整、隐藏、缩小或放大网站，使其在所有设备（台式机、平板电脑和手机）上看起来都不错：

设置viewport

要创建响应式网站，请将以下 <meta> 标记添加到所有网页：

示例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这将设置页面的视口，从而向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

响应式图像

响应式图像是可以很好地缩放以适应任何浏览器尺寸的图像。

使用 width 属性
如果 CSS width 属性设置为 100%，则图像将响应并放大和缩小：

示例

<img src="img_girl.jpg" style="width:100%;">

请注意，在上面的示例中，图像可以放大到比其原始尺寸更大。在许多情况下，更好的解决方案是改用 max-width 属性。

使用 max-width 属性

如果 max-width 属性设置为 100%，则图像会根据需要缩小，但绝不会放大到大于其原始大小：

示例

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

根据浏览器宽度显示不同的图像

HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。

调整浏览器窗口的大小，查看下面的图像如何根据宽度变化：

示例

<picture>
	<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
	<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
	<source srcset="flowers.jpg">
	<img src="img_smallflower.jpg" alt="花">
</picture>

响应式文本大小

文本大小可以用“vw”单位设置，意思是“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小

示例

<h1 style="font-size:10vw">Hello World</h1>

视口是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽度为 50cm，则 1vw 为 0.5cm。

媒体查询

除了调整文本和图像的大小外，在响应式网页中使用媒体查询也很常见。

使用媒体查询，您可以为不同的浏览器大小定义完全不同的样式。

示例：调整浏览器窗口大小，可以看到下面的三个 div 元素将在大屏幕上水平显示，并在小屏幕上垂直堆叠：

<style>
.left, .right {
float: left;
width: 20%; /* 宽度默认为 20% */
}

.main {
float: left;
width: 60%; /* 默认情况下，宽度为 60% */
}

/* 使用媒体查询在 800px 处添加断点：*/
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* 当视口为 800px 或更小时，宽度为 100% */
}
}
</style>

Bootstrap

流行的 CSS 框架 Bootstrap：

示例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 示例</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应式页面的大小以查看效果！</p>
</div>

<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>第 1 列</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>第 2 列</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>列3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>