《给所有人的权威 CSS 指南》中的掌握 CSS |第2部分

目录

No.	Section	Link
1	Responsive Design Principles	Link
2	CSS Variables and Custom Properties	Link
3	Animations and Transitions	Link
4	Best Practices and Organization	Link

---

响应式设计原则

在当今的多设备世界中，响应式设计不是可选的，而是必不可少的。无论是在智能手机还是大型桌面显示器上查看，您的网站都应该看起来很棒。

媒体查询

媒体查询是您的响应式设计超能力：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

响应单位

使用相对单位使您的设计自然响应：

• rem：相对于根元素的字体大小
• em：相对于父元素的字体大小
• vw/vh：相对于视口尺寸
• %：相对于父元素的大小

实践练习：响应服务部分

创建一个响应式服务部分，使用媒体查询和灵活的单元无缝适应不同的屏幕尺寸。

HTML：

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

CSS：让我们探索一下服务部分的更具体的断点。

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

参考：

• MDN Web 文档 - 响应式设计基础 - 响应式设计概念的精彩介绍，涵盖视口、断点和灵活布局。
• FreeCodeCamp - 响应式网页设计认证 - 涵盖响应式设计原理、网格、媒体查询和可访问性的完整课程。
• 我可以使用 - 检查浏览器兼容性以获取响应式设计功能，例如媒体查询和 Flexbox。
• 响应式设计备忘单 - 以易于理解的格式涵盖关键的响应式设计属性和技术。

---

CSS 变量和自定义属性

CSS 变量（自定义属性）为您的样式表带来类似编程的灵活性。它们使维护更容易并实现动态造型。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

实践练习：用于主题化和可重用性的 CSS 变量

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

参考：

• MDN Web 文档 - 使用 CSS 自定义属性（变量） - 全面、适合初学者的解释，包含有关定义、使用和更新 CSS 变量的示例。
• W3Schools - CSS 变量 - 通过实时代码示例涵盖 CSS 变量的基础知识，以便快速练习。
• CSS 技巧 - 自定义属性完整指南 - 综合指南，包含真实用例和高级变量使用技巧。
• Freecodecamp - CSS 变量完整手册 - 探索强大的技术，例如级联效果、基于媒体查询的变量和范围管理。

---

动画和过渡

为您的网站添加动感可创造引人入胜的用户体验。 CSS 提供了两种主要的动画制作方式：

过渡

非常适合简单的状态更改：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

关键帧动画

对于更复杂的多步骤动画：

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

先进的动画技术

动画中的 CSS 自定义属性：

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

高级关键帧动画：

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

实践练习：互动卡

创建具有悬停效果的交互式卡片：

HTML：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

参考：

• MDN Web 文档 - CSS 过渡 - 对 CSS 过渡的清晰介绍，解释如何在更改样式时创建平滑效果。
• MDN Web 文档 - CSS 动画 - 关键帧、动画属性和创建复杂动画的分步指南。
• W3Schools - CSS 过渡 - 适合初学者使用实时代码编辑器以交互方式练习过渡和动画。
• W3Schools - CSS 动画 - 关于使用关键帧和过渡向网站添加动画的简单易懂的指南。
• CSS 技巧 - 动画 - 讨论响应式动画、减少可访问性的运动以及媒体查询集成。
• Animate.css - 一个流行的 CSS 库，提供预构建的动画，您可以轻松添加到您的项目中。

---

最佳实践和组织

CSS架构

• 使用一致的命名约定
• 按组件/功能组织 CSS 文件
• 尽可能保持较低的特异性
• 有效地注释你的代码

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

实践练习：CSS 架构的最佳实践

<！DOCTYPE html>
<html lang="zh-cn">
<头>
    
    
    <title>CSS 架构练习</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- 重置默认浏览器样式 -->
    <link rel="stylesheet" href="styles/layout.css">
    <链接 rel="stylesheet" href="styles/components/header.css"> <!-- 标题组件样式 -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- 卡片组件样式 -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- 用于快速修复的实用程序类 -->
</头>

    



<h3>
  
  
  参考：
</h3>

• BEM - 块元素修饰符 - 一种流行的命名 CSS 类和构建样式以提高可重用性和可维护性的方法。
• SMACSS - CSS 的可扩展和模块化架构 - 将 CSS 组织为逻辑和可维护类别的详细框架。
• Harry Roberts 的 CSS 指南 - 使用逻辑文件结构和命名约定编写可扩展、可维护的 CSS 的高质量指南。

---

建造时间到了！ ？

现在轮到你将所学付诸实践了！这是你的挑战：

• 创建新的 CodePen（在 codepen.io 上免费）
• 构建我们介绍的示例和练习
• 分享您的创作！在下面的评论中添加您的 CodePen 链接

奖励积分：在设计中添加您自己的创意！我会亲自审核并回复评论中分享的每条 CodePen。

？ 专业提示：请记住在 CSS 中添加注释来解释您的想法。它可以帮助其他人从您的代码中学习！

---

接下来是什么？ ？

这是我们的 CSS 从零到英雄系列的第 2 部分。我们将在接下来的文章中更深入地探讨更令人兴奋的 CSS 概念。为了确保您不会错过：

1. ？ 为这篇文章添加书签以便在编码时快速参考
2. ❤️ 喜欢这篇文章如果您觉得它有帮助（它也可以帮助其他人找到它！）
3. ？ 关注我观看本系列的下一部分

让我们联系吧！ ？

你尝试过练习吗？有疑问吗？在评论中分享您的经验！我回复每条评论并喜欢看到您的进步。

第三部分见！快乐编码！ ??‍??‍?

以上是《给所有人的权威 CSS 指南》中的掌握 CSS |第2部分的详细内容。更多信息请关注PHP中文网其他相关文章！