个人网站制作 Part 4 添加响应式设计 | Web开发项目

文章目录

  • 👩‍💻 基础Web开发练手项目系列:个人网站制作
    • 🚀 添加响应式设计
      • 🔨移动优先的响应式样式
        • 🔧步骤 1: 添加媒体查询
      • 🔨图片和布局调整
        • 🔧步骤 2: 使用响应式图片
        • 🔧步骤 3: 调整布局
    • 🚀 预览与保存
    • 🚀 下一步计划


👩‍💻 基础Web开发练手项目系列:个人网站制作

欢迎回到基础Web开发练手项目系列!

在前三篇博文中,我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果和页面滚动效果。

在本篇中,我们将学习如何添加响应式设计,使你的网站适应不同屏幕大小。

在这里插入图片描述

🚀 添加响应式设计

🔨移动优先的响应式样式

🔧步骤 1: 添加媒体查询

style.css 文件中添加以下媒体查询,以实现移动设备优先的响应式设计:

/* 移动设备样式(默认样式) */
body {font-size: 16px;
}/* 平板设备及以上的样式 */
@media (min-width: 768px) {body {font-size: 18px;}
}/* 大屏设备样式 */
@media (min-width: 1200px) {body {font-size: 20px;}
}

🔨图片和布局调整

🔧步骤 2: 使用响应式图片

index.html 文件中使用 srcset 属性为图片添加响应式支持:

<img src="mobile-image.jpg" alt="移动设备图片" srcset="tablet-image.jpg 768w, desktop-image.jpg 1200w">
🔧步骤 3: 调整布局

style.css 文件中调整部分布局,以适应不同屏幕大小:

/* 移动设备样式 */
section {margin: 1rem 0;
}/* 平板设备及以上的样式 */
@media (min-width: 768px) {section {margin: 2rem 0;}
}/* 大屏设备样式 */
@media (min-width: 1200px) {section {margin: 3rem 0;}
}

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个在不同屏幕上都能良好呈现的响应式个人网站了!

🚀 下一步计划

在下一篇文章中,我们将学习如何优化网站性能,包括图片压缩、代码优化等。记得继续关注本系列,使你的网站更具竞争力!

通过这个项目,你已经学到了Web开发中许多重要的基础知识。祝你在编码的道路上越走越远,继续取得进步!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/620616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用网络测试仪构造特殊流量

为什么要仿真特殊流量 在现网中&#xff0c;网络流量时常伴随着突发&#xff0c;突发流量可能会造成网络的拥塞&#xff0c;从而产生丢包、抖动和时延&#xff0c;导致网络服务质量整体下降。面对宏观上的突发&#xff0c;通常采用在网络设备入向限速或者流量整形功能来消除突…

使用代理IP池实现多线程爬虫的方法

目录 前言 代理IP的概念和作用 为什么使用代理IP池 代理IP池的实现步骤 代码实现 注意事项 总结 前言 随着互联网的发展&#xff0c;爬虫技术在各个领域中被广泛应用。然而&#xff0c;目标网站对爬虫的限制也日益严格&#xff0c;例如限制单个IP的请求频率。为了解决这…

从0到1:如何建立一个大规模多语言代码生成预训练模型

国产AI辅助编程工具 CodeGeeX 是一个使用AI大模型为基座的辅助编程工具&#xff0c;帮助开发人员更快的编写代码。可以自动完成整个函数的编写&#xff0c;只需要根据注释或Tab按键即可。它已经在Java、JavaScript和Python等二十多种语言上进行了训练&#xff0c;并基于大量公开…

三轴加速度计LIS2DW12开发(3)----检测活动和静止状态

e2studio开发三轴加速度计LIS2DW12.3--检测活动和静止状态 概述视频教学样品申请源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()…

mongoose6.0版以上操作mongodb数据库的基本使用

1、介绍 Mongoose 是一个对象文档模型库&#xff0c;官网 http://www.mongoosejs.net/ 2、作用 方便使用代码操作 mongodb 数据库 3、使用流程 3.1、链接数据库 //1. 安装 mongoose---> npm install mongoose --save//2. 导入 mongoose const mongoose require(&quo…

航模遥控开关电路图大全

航模遥控开关电路图&#xff08;一&#xff09;&#xff1a;单通道航模遥控器的构造 遥控装置一般应用于车模、航模等领域&#xff0c;用以实现对靶机、航模、玩具等的自动控制。下面介绍一种无线比例电机遥控器的制作方法。它选用易购元件&#xff0c;具有原理简单、性能可靠…

28 星际旋转

效果演示 实现了一个太阳系动画&#xff0c;其中包括了地球、火星、金星、土星、水星、天王星、海王星以及火卫二号等行星的动画效果。太阳系的行星都被放在一个固定的容器中&#xff0c;并使用CSS动画来实现旋转和移动的效果。当太阳系的行星绕着太阳运行时&#xff0c;它们会…

电子学会C/C++编程等级考试2021年09月(四级)真题解析

C/C++编程(1~8级)全部真题・点这里 第1题:最佳路径 如下所示的由正整数数字构成的三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 从三角形的顶部到底部有很多条不同的路径。对于每条路径,把路径上面的数加起来可以得到一个和,和最大的路径称为最佳路径。你的任务就是求出最佳路径…

Rust-trait

Rust语言中的trait是非常重要的概念。 在Rust中&#xff0c;trait这一个概念承担了多种职责。在中文里&#xff0c;trait可以翻译为“特征”“特点”“特性”等。 成员方法 trait中可以定义函数。用例子来说明&#xff0c;我们定义如下的trait: 上面这个trait包含了一个方法…

【C++入门到精通】智能指针 [ C++入门 ]

阅读导航 引言一、什么是智能指针二、为什么需要智能指针三、内存泄漏1. 什么是内存泄漏&#xff0c;内存泄漏的危害2. 内存泄漏的示例&#xff0c;以及解决方法3. 内存泄漏分类&#xff08;1&#xff09;堆内存泄漏(Heap leak)&#xff08;2&#xff09;系统资源泄漏 4. 如何检…

FFmpeg 的使用与Docker安装流媒体服务器

本文阐述的均为命令行的使用方式&#xff0c;并不牵扯FFmpeg 的 C音视频开发内容&#xff0c;补充一句&#xff0c;C的资料真的少&#xff0c;能把C学好的人&#xff0c;我真的是觉得巨佬。 我主要是使用FFmpeg 推流方面的知识&#xff0c;案例大都是靠近这方面。 一、FFmpeg…

如何在“Microsoft Visual Studio”中使用OpenCV构建应用程序

我在这里描述的所有内容都将应用于 OpenCV 的界面。我首先假设您已经阅读并成功完成了 Windows 中的安装教程。因此&#xff0c;在进一步操作之前&#xff0c;请确保您有一个包含 OpenCV 头文件和二进制文件的 OpenCV 目录&#xff0c;并且您已按照此处所述设置环境变量 设置 O…

迅腾文化用网络集成化生态系统助力品牌之路的坚实后盾

商业竞争激烈&#xff0c;品牌不仅是企业的标志和形象&#xff0c;更是其核心价值和竞争力的体现。然而&#xff0c;企业在品牌推广过程中面临着诸多如缺乏有效的渠道管理、品牌形象模糊以及竞争激烈的市场环境等。这些阻碍着企业的品牌发展和市场占有率的提升。本文将通过企业…

C语言辨析——深入理解格式字符的用法

1. 问题 下面程序为什么的输出结果为什么不是25而是0&#xff1f;问题出在哪&#xff1f; #include <stdio.h> #include <math.h> int main() {int a3,b4; printf("%d\n",pow(a,2)pow(b,2)); return 0; } 2. 分析 函数pow的返回类型是double&…

线上剧本杀小程序搭建,未来线上剧本杀有哪些发展优势?

剧本杀游戏是当下比较流行的一种新型游戏模式&#xff0c;它能够让玩家在游戏中进行角色扮演&#xff0c;体验不同的角色人生&#xff0c;沉浸式玩游戏&#xff0c;因此受到了众多年轻人的喜欢。随着互联网科技的发展&#xff0c;剧本杀的发展也转型到了互联网上&#xff0c;为…

爬虫—抓取表情党热门栏目名称及链接

爬虫—抓取表情党热门栏目名称及链接 表情党网址&#xff1a;https://qq.yh31.com/ 目标&#xff1a;抓取表情党主页的热门栏目名称及对应的链接&#xff0c;如下图所示&#xff1a; 按F12&#xff08;谷歌浏览器&#xff09;&#xff0c;进入开发者工具模式&#xff0c;进行…

【WPF.NET开发】文档批注

本文内容 便笺要点数据锚定匹配批注与批注对象 在纸质文档上编写说明或注释毫不稀奇&#xff0c;我们几乎认为这是理所当然的。 这些说明或注释就是“批注”&#xff0c;我们将其添加到文档&#xff0c;用于标注信息或突出显示兴趣项以供日后参考。 虽然在打印文档上编写注释…

大数据StarRocks(七):数据表创建

1. 基本概念 1.1 Row & Column 一张表包括行&#xff08;Row&#xff09;和列&#xff08;Column&#xff09;。Row 即用户的一行数据。Column 用于描述一行数据中不同的字段。 ⚫ 在默认的数据模型中&#xff0c;Column 只分为排序列和非排序列。存储引擎会按照排序列对…

RK3568笔记八: Display子系统

modetest 是由 libdrm 提供的测试程序&#xff0c;可以查询显示设备的特性&#xff0c;进行基本的显示测试&#xff0c;以及设置显示的模式。 我们可以借助该工具来学习 Linux DRM 应用编程&#xff0c;另外为了深入分析 Rockchip DRM driver&#xff0c;有必要先了解一下这个…

领域驱动设计应用之WebAPI

领域驱动设计应用之WebAPI 此篇文章主要讲述领域驱动设计在WebApi中的应用&#xff0c;以及设计方式&#xff0c;这种设计的原理以及有点。 文章目录 领域驱动设计应用之WebAPI前言一、相对于传统设计模式的有点二、WebAPI对接中的使用案例业务拆分父类设计HttpResponse(返回)…