【CSS学习第十三篇】

CSS学习第十三篇

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

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

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

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

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

目录:本节只学第一个

2. 响应式开发原理

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

3. 响应式布局容器

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

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

是比较困难的:

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

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

4. 响应式导航案例

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

相关推荐
Csvn2 分钟前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师2 分钟前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
艾莉丝努力练剑4 分钟前
【AI大模型接入SDK】Gemini模型接入知识体系
java·开发语言·网络·人工智能·网络协议·学习·http
yume_sibai6 分钟前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
传奇开心果编程7 分钟前
【Rust入门知识点学与练】第13课:枚举 Enum
开发语言·学习·rust
大梦想家a17 分钟前
基于 HTML+CSS 的个人生活主页设计与实现
css·html·生活
雪芽蓝域zzs30 分钟前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
IT_陈寒34 分钟前
Java字符串判等踩坑记:==和equals真的不能乱用
前端·人工智能·后端
晴天161 小时前
前端虚拟滚动(虚拟列表)原理与实战
前端