Tutorials 参考 练习 Videos NEW Menu
Paid Courses Website NEW

CSS 教程

CSS首页 CSS简介 CSS语法 CSS选择器 CSS如何 CSS注释 CSS颜色 CSS背景 CSS边框 CSS边距 CSS填充 CSS高度/宽度 CSS Box模型 CSS大纲 CSS文字 CSS字体 CSS图标 CSS链接 CSS列表 CSS表 CSS显示 CSS最大宽度 CSS位置 CSS Z-index CSS溢出 CSS浮动 CSS内联块 CSS对齐 CSS组合器 CSS伪类 CSS伪元素 CSS不透明度 CSS导航栏 CSS下拉列表 CSS图片库 CSS图像精灵 CSS属性选择器 CSS表格 CSS计数器 CSS网站布局 CSS单位 CSS特异性 CSS !important CSS Math 函数 s

CSS高级

CSS圆角 CSS边框图片 CSS背景 CSS颜色 CSS Color Keywords CSS渐变 CSS阴影 CSS文字 Effects CSS Web字体 CSS 2D转换 CSS 3D变形 CSS过渡 CSS动画 CSS工具提示 CSS样式图片 CSS Image Reflection CSS对象适合 CSS object-position CSS按钮 CSS分页 CSS多列 CSS用户界面 CSS变量 CSS Box大小 CSS媒体查询 CSS MQ示例 CSS Flexbox

CSS 自适应

RWD简介 后视视口 RWD网格视图 RWD媒体查询 RWD图像 RWD视频 RWD框架 RWD模板

CSS 网格

网格介绍 网格容器 网格项

CSS SASS

SASS Tutorial

CSS 示例

CSS模板 CSS示例 CSS测验 CSS 练习 CSS证书

CSS 参考

CSS参考 CSS选择器 CSS功能 CSS参考 Aural CSS Web安全字体 CSS动画 CSS单位 CSS PX-EM转换器 CSS颜色 CSS颜色值 CSS默认值 CSS浏览器支持

Responsive Web Design - Introduction


什么是响应式 Web Design?

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML和CSS.

Responsive web design is not a program or a JavaScript.


Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:



Desktop

Tablet

Phone

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Don't worry if you don't understand the example below, we will break down the code, step-by-step, in the next chapters: