web复习（八）

一、响应式布局

1. 响应式概述

响应式布局是一种网页设计方法，使页面能够自适应不同尺寸的设备（如手机、平板、电脑等），为用户提供了一致的浏览体验。

示例：使用媒体查询实现简单的响应式设计。

HTML

2. 弹性盒子布局

弹性盒子布局（Flexbox）是一种用于一维布局的 CSS 技术，可实现项目在容器内的灵活排列和伸缩。

示例：使用 Flexbox 创建水平垂直居中的布局。

HTML

3. 媒体查询

媒体查询允许根据不同的屏幕尺寸应用特定的 CSS 样式。

示例：为不同屏幕尺寸设置不同的样式。

HTML

4. 元视口标记

确保网页在移动设备上正确渲染。

示例：

HTML

二、变换、过度与动画

1. 变换

通过 CSS 的 transform 属性实现元素的变换效果。

1.1 旋转

示例：旋转元素。

HTML

旋转文本

1.2 缩放

示例：缩放元素。

HTML

缩放文本

1.3 平移

示例：平移元素。

HTML

平移文本

1.4 倾斜

示例：倾斜元素。

HTML

倾斜文本

1.5 变换原点

示例：设置变换原点。

HTML

变换原点示例

2. 过渡

通过 transition 属性实现平滑的过渡效果。

示例：设置颜色过渡。

HTML

3. 关键帧动画

通过 @keyframes 定义动画的关键帧。

示例：创建一个简单的动画。

HTML

动画文本

三、前端 CSS 的工程化

1. CSS 预处理器 Sass

Sass 是一种 CSS 预处理器，提供了嵌套写法、变量定义、模块系统、混入和继承等功能。

1.1 嵌套写法

示例：嵌套写法。

scss

.container {
    width: 100%;
    .item {
        width: 50%;
    }
}

1.2 定义变量

示例：定义颜色变量。

scss

复制

$primary-color: #3498db;
body {
    color: $primary-color;
}

1.3 模块系统

示例：定义和引入模块。

scss

// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';
body {
    color: $primary-color;
}

1.4 混入

示例：创建和使用混入。

scss

@mixin border-radius($radius) {
    border-radius: $radius;
}
.box {
    @include border-radius(10px);
}

1.5 继承

示例：使用继承。

scss

.base {
    color: #333;
}
.extended {
    @extend .base;
    font-weight: bold;
}

2. 使用 webpack 构建系统

Webpack 是一个模块打包器，用于将项目中的各种资源（如 CSS、JavaScript）打包成可部署的格式。

2.1 安装 Node.js 环境

步骤：

1. 从 Node.js 官网下载并安装最新版本的 Node.js。

2. 验证安装：在命令行中运行 node -v 和 npm -v。

2.2 准备项目文件

步骤：

1. 创建项目文件夹。

2. 初始化项目：在项目根目录下运行 npm init -y 生成 package.json。

2.3 安装 webpack 及其相关组件

步骤：

1. 安装 webpack 和 webpack-cli：npm install webpack webpack-cli --save-dev。

2. 安装 sass-loader 和 node-sass：npm install sass-loader node-sass --save-dev。

2.4 预览与调试

步骤：

1. 创建 webpack.config.js 配置文件。

2. 配置开发服务器：安装 webpack-dev-server：npm install webpack-dev-server --save-dev。

3. 在 package.json 中添加启动脚本："start": "webpack serve"。

4. 启动开发服务器：npm start。

2.5 打包

步骤：

1. 在 package.json 中添加打包脚本："build": "webpack"。

2. 运行打包命令：npm run build。