1.1 移动端优先(Mobile-First)
Responsive design 就是一种网页开发的理念，让网站根据各种屏幕尺寸和设备进行自适应，给用户提供最佳使用体验。响应式布局的主要目标就是让网站对所有用户都友好无论他们用什么设备。
移动端优先 就是从小屏幕的移动设备开始设计，然后再扩展到更大的屏幕。这种方法有助于关注网站最重要的元素和功能。
移动端优先的优势:
- 为移动用户优化内容
- 简化小屏幕的设计和功能
- 通过减少内容来提高性能
示例:
CSS
/* 移动端的基础样式 */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
/* 大屏幕的样式 */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
1.2 渐进增强(Progressive Enhancement)
渐进增强专注于为所有用户提供基本功能，然后为功能更强的浏览器和设备添加增强。这个方法确保了内容的可访问性，即使某些功能或样式不被用户的设备支持。
渐进增强的优势:
- 为所有用户提供基本功能
- 为拥有现代设备的用户提升体验
- 降低内容或功能丢失的风险
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐进增强</title>
<style>
/* 所有浏览器的基础样式 */
body {
font-family: Arial, sans-serif;
}
/* 现代浏览器的增强样式 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div>内容1</div>
<div>内容2</div>
</div>
</body>
</html>
1.3 弹性布局(Fluid Layouts)
弹性布局是指使用可以适应不同屏幕尺寸的灵活元素。这可以包括使用灵活的容器，它们根据屏幕的大小自动调整尺寸。
弹性布局的优势:
- 在不同设备上改善内容显示
- 更好地适应屏幕尺寸变化
- 提高内容的使用便捷性和可访问性
示例:
HTML
<div class="container">
<div class="item-1">Content item 1</div>
<div class="item-2">
Etiam scelerisque lectus nulla, eget convallis orci convallis vel. Etiam sed interdum sem. Nunc vestibulum lectus nibh, in volutpat velit fermentum eget. Mauris in risus tincidunt, sodales odio et, rutrum ligula. In iaculis congue ex in laoreet. Sed id eros porttitor, finibus diam ultrices, consectetur leo. Fusce aliquam, nibh ac sollicitudin viverra, felis libero fringilla orci, nec auctor elit sapien non arcu. Proin dolor mi, iaculis ut velit id, vestibulum consectetur metus. Duis venenatis felis a diam elementum, eget ullamcorper leo scelerisque. Sed tempus euismod urna et tristique. Duis at odio quis libero commodo ullamcorper id vel odio. Maecenas volutpat rhoncus sodales. Mauris eget nunc accumsan, rhoncus massa at, placerat lorem.
Etiam ullamcorper elementum tellus non euismod. Mauris euismod mi nisi, sed egestas ligula varius sed. Nunc tortor elit, hendrerit sed gravida in, tempus nec augue. Aliquam vitae condimentum velit. Sed id massa ac felis tempor elementum. Aenean at nulla ipsum. Fusce sed cursus tortor. Duis sodales rhoncus eros, non aliquam ante ultricies ut. Pellentesque auctor ultricies aliquet. In laoreet enim dolor, vel consectetur sapien laoreet eu.
In efficitur pharetra ex convallis egestas. Praesent egestas, sapien fermentum consectetur vestibulum, quam dui pharetra urna, vitae finibus arcu lacus quis mauris. Quisque consectetur lorem sapien, nec pulvinar elit varius vitae. Cras elementum risus lacus, a interdum tellus euismod ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pharetra, odio vel facilisis venenatis, ipsum leo viverra ligula, ut venenatis enim ipsum ut lectus. Fusce cursus mollis congue.
</div>
</div>
CSS
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
color: white;
}
.item-1 {
min-height: 50px;
width: calc(100% / 3);
float: left;
background: purple;
}
.item-2 {
background: gray;
}
1.4 内容层次结构(Content Hierarchy)
内容层次结构对响应式布局很重要，因为它有助于将信息组织得更易于访问和理解，并且在任何设备上都很清晰。这包括使用标题、段落、列表和其他元素来创造一个清晰且逻辑的结构。
内容层次结构的优势:
- 改善信息的可读性和感知
- 提高所有用户的内容可访问性
- 简化网站导航和交互
示例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容层次结构</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>主要标题</h1>
<h2>副标题</h2>
<p>
这是跟在副标题后面的段落文本示例。
文字应该要对所有用户来说都容易阅读和理解。
</p>
</body>
</html>
GO TO FULL VERSION