【CSS学习第十三篇】

CSS学习第十三篇

  • [1. 移动端常见布局---响应式布局导读](#1. 移动端常见布局—响应式布局导读)
  • [2. 响应式开发原理](#2. 响应式开发原理)
  • [3. 响应式布局容器](#3. 响应式布局容器)
  • [4. 响应式导航案例](#4. 响应式导航案例)

1. 移动端常见布局---响应式布局导读

响应式:页面内的布局会随着屏幕的大小变化而发生响应,做出不同的布局。所以,

响应式布局不需要单独写移动端页面,

是响应不同的设备来发生变化的,包括pc端、pad端、移动端。
目标:(本节只介绍前两个)

目录:本节只学第一个

2. 响应式开发原理

媒体查询:可以检测到不同的宽度。

3. 响应式布局容器

一个页面的页面元素很多,

如果要通过媒体查询来控制每一个页面的大小变化,

是比较困难的:

所以,在响应式里面,提出了这样的一种策略:布局容器

但是我们也可以根据实际情况自己定义划分。
实操:

4. 响应式导航案例

我们来做一个响应式导航的案例。
实操:

相关推荐
SameX3 小时前
ArkTS 做 5 态数据流 —— 咖啡电量的代谢状态机怎么驱动 UI
前端
Dovis(誓平步青云)3 小时前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
爱吃烧烤的技术渣3 小时前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
MetWeave3 小时前
风的三十年:一个机场的风在变小吗:10,958 天的账(《风不是一个数》系列第 6 篇)
前端·数据可视化
青烟小生3 小时前
前端实时协同编辑与 CRDT 冲突解决实战:从 OT 到 Yjs 底层原理(完整版)
前端
陈随易3 小时前
神级 Skill,让 AI 用 HTML 代替 Markdown 回复
前端·后端·程序员
eidnxndrdkdns3 小时前
PE 自校验的三个坑:恒失败、基址变化、以及被漏在外面的检测器
前端
90后的晨仔3 小时前
解决 Android 构建报错:Unable to delete file .../file-map.txt
android·前端
ZhengEnCi3 小时前
为什么苹果的圆角更高级:连续曲率圆角 Squircle 从超椭圆到 CSS 实现的完全讲解
css·设计
Yuhano3 小时前
W4. RAG 让 Agent 拥有"外部记忆"
前端·aigc