CSS response式design - 极客tutorial网

1. response式designIntroduction

response式网页design (Responsive Web Design, RWD) is a网页designmethod, 使网页able to根据不同设备屏幕尺寸, 分辨率 and 方向自动调整布局 and 样式, providing最佳 user体验.

提示

response式design coreprinciples is "一次design, 处处适用", throughflexible 布局, 弹性 graph片 and 媒体queryetc.techniques, 使网页 in 各种设备 on 都能正常显示 and using.

1.1 response式design important 性

随着move设备普及, 越来越 many userthrough手机 and 平板访问网站. 据statistics, 全球超过一半网页traffic来自move设备. 因此, creationresponse式网站变得至关 important :

providing一致 user体验, 无论userusingwhat设备访问网站
improving网站可访问性 and availability
has 利于搜index擎optimization (SEO) , 因 for Google优先indexmove友 good 网站
降 low Development and maintenance成本, 只需要一个网站version
improving网站转化率 and user满意度

1.2 response式design 组成部分

response式design主要由以 under 几个部group成:

流体布局 (Fluid Layout) : using相 for 单位 (such as百分比) 代替固定单位 (such as像素) , 使布局able to根据屏幕尺寸自动调整
弹性graph片 and 媒体 (Flexible Images and Media) : 确保graph片 and 媒体元素able to根据containers big small 自动调整
媒体query (Media Queries) : 根据不同屏幕尺寸 and 设备featuresapplication不同 CSS样式
move优先design (Mobile-First Design) : from move设备开始design, 然 after 逐步scale to 更 big 屏幕尺寸
response式排版 (Responsive Typography) : 确保文本 in 不同设备 on 都能清晰 readable

2. 视口 (Viewport) 设置

视口 is 指浏览器in显示网页 in 容区域. for 了implementationresponse式design, 首先需要正确设置视口, 使网页able to适应不同设备屏幕尺寸.

2.1 视口元tag

in HTMLdocumentation <head>tagin添加视口元tag, 告诉浏览器such as何processing网页尺寸 and 缩放.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口元tag property

width=device-width: 将视口宽度设置 for 设备屏幕宽度
initial-scale=1.0: 设置初始缩放比例 for 1.0, 即不缩放
maximum-scale=1.0: 设置最 big 缩放比例 for 1.0, 防止user放 big 页面
minimum-scale=1.0: 设置最 small 缩放比例 for 1.0, 防止user缩 small 页面
user-scalable=no: 禁止user缩放页面

warning

除非 has 特殊requirements, 否则不建议usingmaximum-scale, minimum-scale and user-scalableproperty来禁止user缩放页面, 这会影响网站可访问性.

3. 媒体query (Media Queries)

媒体query is CSS3引入一种techniques, 用于根据不同媒体class型 and 设备featuresapplication不同 CSS样式. 它 is implementationresponse式design coretechniques.

3.1 媒体query basic语法

/* 语法: @media 媒体class型 and (媒体features) { CSS样式 } */

/* 针 for 所 has 屏幕设备, 当宽度 small 于etc.于768px时application样式 */
@media screen and (max-width: 768px) {
    /* CSS样式 */
    body {
        font-size: 14px;
    }
}

/* 针 for 打印设备application样式 */
@media print {
    /* CSS样式 */
    body {
        font-size: 12pt;
        color: black;
    }
}

/* 针 for 所 has 媒体class型, 当宽度 in 768px to 1024px之间时application样式 */
@media all and (min-width: 768px) and (max-width: 1024px) {
    /* CSS样式 */
    .container {
        width: 90%;
    }
}

3.2 媒体class型

媒体querysupport以 under 媒体class型:

all: 所 has 媒体class型 (默认值)
screen: 屏幕设备
print: 打印设备
speech: 屏幕阅读器etc.语音设备

3.3 媒体features

媒体querysupport many 种媒体features, 常用 including:

width: 设备宽度
height: 设备 high 度
device-width: 设备屏幕宽度
device-height: 设备屏幕 high 度
orientation: 设备方向 (portrait竖屏 or landscape横屏)
aspect-ratio: 设备宽 high 比
device-aspect-ratio: 设备屏幕宽 high 比
resolution: 设备分辨率
color: 设备颜色位数
color-index: 设备颜色index数
monochrome: 设备单色位数

3.4 媒体query usingmethod

媒体query可以through以 under 几种方式using:

3.4.1 in 联媒体query

in CSSfilein直接using@media规则.

/* Basics样式 */
body {
    font-size: 16px;
}

.container {
    width: 960px;
    margin: 0 auto;
}

/* 媒体query */
@media screen and (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .container {
        width: 95%;
    }
}

3.4.2 out 部CSSfile

in HTMLfileinusing<link>tag引入 out 部CSSfile, 并usingmediaproperty指定适用媒体class型 and features.

<!-- Basics样式 -->
<link rel="stylesheet" href="style.css">

<!-- 针 for 屏幕宽度 small 于etc.于768px 设备 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

<!-- 针 for 打印设备 -->
<link rel="stylesheet" href="print.css" media="print">

3.4.3 @import规则

in CSSfileinusing@import规则引入otherCSSfile, 并指定适用媒体class型 and features.

/* Basics样式 */
@import url("style.css");

/* 针 for 屏幕宽度 small 于etc.于768px 设备 */
@import url("mobile.css") screen and (max-width: 768px);

/* 针 for 打印设备 */
@import url("print.css") print;

3.5 媒体query common断点

断点 (Breakpoint) is 指触发媒体query 屏幕尺寸. 选择合适断点 for 于creationresponse式design至关 important . 以 under is 一些common 断点:

手机 (Mobile) : small 于etc.于480px
平板 (Tablet) : 481px to 768px
small 型笔记本 (Small Laptop) : 769px to 1024px
桌面 (Desktop) : 1025px to 1200px
big 型桌面 (Large Desktop) : big 于1200px

提示

断点选择应该基于design practicalrequirements, 而不 is 固定设备尺寸. 建议 from in 容出发, 当 in 容 in 当 before 尺寸 under 显示不佳时, 就应该考虑添加断点.

3. 流体布局

流体布局 is 指using相 for 单位 (such as百分比) 代替固定单位 (such as像素) 来定义布局, 使布局able to根据屏幕尺寸自动调整.

3.1 相 for 单位

流体布局常用相 for 单位including:

百分比 (%) : 相 for 于父元素尺寸
em: 相 for 于元素字体 big small
rem: 相 for 于根元素 (html) 字体 big small
vw: 视口宽度 1%
vh: 视口 high 度 1%
vmin: 视口宽度 and high 度in 较 small 值 1%
vmax: 视口宽度 and high 度in 较 big 值 1%

3.2 流体布局example

流体布局 and 固定布局 for 比

/* 固定布局 (不推荐)  */
.fixed-layout {
    width: 960px;
    margin: 0 auto;
}

.fixed-column {
    width: 300px;
    float: left;
    margin-right: 30px;
}

/* 流体布局 (推荐)  */
.fluid-layout {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.fluid-column {
    width: 30%;
    float: left;
    margin-right: 5%;
}

.fluid-column:last-child {
    margin-right: 0;
}

4. 弹性graph片 and 媒体

in response式designin, graph片 and 媒体元素需要able to根据containers big small 自动调整, 避免溢出 or 变形.

4.1 弹性graph片

确保graph片able to根据containers big small 自动调整 basicmethod is 设置max-width: 100% and height: auto.

/* 弹性graph片 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

弹性graph片example

on 面 graph片会根据containers big small 自动调整, 保持其原始宽 high 比.

4.2 response式graph片

除了弹性graph片 out , 还可以usingHTML5 <picture>元素 and srcsetproperty来providing不同尺寸 and 分辨率 graph片, 根据设备features选择最合适 graph片.

4.2.1 srcsetproperty

srcsetproperty用于指定不同尺寸 graph片, 浏览器会根据设备features选择合适 graph片.

<!-- srcsetpropertyexample -->
<img 
    src="small.jpg" 
    srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" 
    sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px" 
    alt="response式graph片example"
>

4.2.2 <picture>元素

<picture>元素用于providing更 complex graph片选择逻辑, 允许根据不同媒体条件providing不同 graph片sources.

<!-- picture元素example -->
<picture>
    <!-- 针 for  small 屏幕设备 -->
    <source media="(max-width: 600px)" srcset="small.jpg">
    
    <!-- 针 for inetc.屏幕设备 -->
    <source media="(max-width: 1024px)" srcset="medium.jpg">
    
    <!-- 针 for  big 屏幕设备 -->
    <source media="(min-width: 1025px)" srcset="large.jpg">
    
    <!--  after 备graph片 -->
    <img src="fallback.jpg" alt="response式graph片example">
</picture>

4.3 response式视频

视频元素也需要设置 for 弹性 , 以适应不同屏幕尺寸.

/* 弹性视频 */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9宽 high 比 */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.video-container iframe, 
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

response式视频example

5. move优先design

move优先design is 指 from move设备开始design, 然 after 逐步scale to 更 big 屏幕尺寸. 这种method good 处 is :

确保 in move设备 on providing最佳 user体验
reducing初始加载时间, 因 for move设备version通常更轻量
鼓励简洁 design, 只package含必要 in 容 and functions
更 easy implementationresponse式design, 因 for 只需要添加样式, 而不 is modify现 has 样式

5.1 move优先design implementationmethod

implementationmove优先design basic步骤 is :

首先designmove设备version 网站, package含core in 容 and functions
using媒体query for 更 big 屏幕尺寸添加额 out 样式 and 布局
usingmin-width媒体query, from move设备开始, 逐步scale to 更 big 屏幕尺寸

move优先designexample

/* move设备Basics样式 */
body {
    font-size: 14px;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.menu {
    display: flex;
    flex-direction: column;
}

/* 平板设备样式 */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
    
    .container {
        width: 90%;
    }
    
    .menu {
        flex-direction: row;
    }
}

/* 桌面设备样式 */
@media screen and (min-width: 1024px) {
    .container {
        width: 1024px;
    }
}

6. response式排版

response式排版 is 指根据屏幕尺寸调整文本 big small , 行 high and 间距, 确保 in 各种设备 on 都能清晰 readable .

6.1 response式字体 big small

可以using相 for 单位 (such asrem, vw) and 媒体query来implementationresponse式字体 big small .

6.1.1 usingrem单位

/* 设置根元素字体 big  small  */
html {
    font-size: 16px;
}

/* Basics文本样式 */
h1 {
    font-size: 2rem; /* 32px */
}

h2 {
    font-size: 1.5rem; /* 24px */
}

p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
}

/* 媒体query调整根元素字体 big  small  */
@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

6.1.2 usingvw单位

vw单位表示视口宽度 1%, 可以用于creation完全response式字体 big small .

/* usingvw单位设置字体 big  small  */
h1 {
    font-size: 5vw; /* 视口宽度 5% */
}

h2 {
    font-size: 3vw; /* 视口宽度 3% */
}

p {
    font-size: 1.5vw; /* 视口宽度 1.5% */
}

6.1.3 usingcalc()function

可以usingcalc()function结合 many 种单位, creation更flexible response式字体 big small .

/* usingcalc()function设置字体 big  small  */
h1 {
    font-size: calc(20px + 2vw); /* Basics20px, 加 on 视口宽度 2% */
}

p {
    font-size: calc(14px + 0.5vw); /* Basics14px, 加 on 视口宽度 0.5% */
}

6.2 response式行 high and 间距

除了字体 big small out , 行 high , 字间距 and 段落间距也应该根据屏幕尺寸for调整.

/* response式行 high  and 间距 */
p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1.5em;
    letter-spacing: 0.5px;
}

/*  small 屏幕设备调整 */
@media screen and (max-width: 768px) {
    p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 1.2em;
        letter-spacing: 0.3px;
    }
}

7. response式design实践case

7.1 response式导航栏

导航栏 is 网站 important 组成部分, 需要 in 各种设备 on 都能正常工作.

response式导航栏example

<nav class="navbar">
    <div class="container">
        <div class="logo">Logo</div>
        <button class="menu-toggle">☰</button>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">service</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</nav>

/* Basics样式 */
.navbar {
    background-color: #4285F4;
    color: white;
    padding: 15px 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-links li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* response式样式 */
@media screen and (max-width: 768px) {
    .container {
        flex-wrap: wrap;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        text-align: center;
    }
}

7.2 response式卡片布局

卡片布局 is acommon design模式, 需要 in 不同屏幕尺寸 under 调整列数 and 布局.

response式卡片布局example

卡片 1

卡片 2

卡片 3

卡片 4

卡片 5

卡片 6

调整浏览器窗口 big small , 观察卡片布局变化: big 屏幕显示3列, inetc.屏幕显示2列, small 屏幕显示1列.

8. response式designtool and resource

以 under is 一些常用 response式designtool and resource:

8.1 designtool

Figma: 一款流行 UIdesigntool, supportresponse式design and 原型制作
Adobe XD: Adobe推出 UI/UXdesigntool, supportresponse式design and 原型制作
Sketch: 一款专业 UIdesigntool, 主要用于macOSsystem
Adobe Photoshop: 虽然主要用于graph像processing, 但也可以用于网页design

8.2 Developmenttool

Chrome DevTools: Chrome浏览器 in 置 Developmenttool, support设备mock and response式designtest
Firefox Developer Tools: Firefox浏览器 in 置 Developmenttool, supportresponse式designtest
Responsinator: in 线response式designtesttool, 可以 in 不同设备尺寸 under 预览网站
BrowserStack: providing真实设备 and 浏览器 testenvironment, 用于testresponse式design

8.3 framework and library

Bootstrap: 最流行 response式designframework, providing了 big 量 response式component and 布局tool
Foundation: 另一款流行 response式designframework, providing了flexible 布局system and component
Materialize: 基于Material Design response式designframework
Tailwind CSS: 一款Practical优先 CSSframework, supportresponse式design

9. 练习

练习 1: Basicsresponse式布局

creation一个HTMLfile, package含以 under structure:

<div class="container">
    <header>
        <h1>response式design练习</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">service</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <main>
        <div class="content">
            <h2>主要 in 容</h2>
            <p>这 is 页面 主要 in 容区域. </p>
        </div>
        <aside>
            <h3>侧edge栏</h3>
            <p>这 is 页面 侧edge栏区域. </p>
        </aside>
    </main>
    <footer>
        <p>© 2025 response式design练习</p>
    </footer>
</div>

creation一个CSSfile, implementation以 under 要求:
- using流体布局, containers宽度using百分比
- in big 屏幕 on , main区域using两栏布局 (content占70%, aside占30%)
- in small 屏幕 on , main区域using单栏布局 (content and aside各占100%)
- 导航栏 in big 屏幕 on 水平排列, in small 屏幕 on 垂直排列
- using媒体queryimplementationresponse式design
- 添加适当样式 and 间距
in HTMLfilein引入CSSfile, test不同屏幕尺寸 under 效果

练习 2: response式graph片 and 排版

creation一个HTMLfile, package含graph片 and 文本 in 容
creation一个CSSfile, implementation以 under 要求:
- graph片using弹性布局, 确保 in 不同屏幕尺寸 under 都能正常显示
- usingrem单位设置response式字体 big small
- 根据屏幕尺寸调整文本行 high , 间距 and 字间距
- using媒体query for 不同屏幕尺寸添加不同样式
in HTMLfilein引入CSSfile, test不同屏幕尺寸 under 效果

练习 3: move优先design

creation一个HTMLfile, implementation一个 simple 网站布局
creation一个CSSfile, usingmove优先designmethod:
- 首先designmove设备version 样式
- usingmin-width媒体query for 更 big 屏幕尺寸添加样式
- implementationresponse式导航栏, 布局 and 排版
in HTMLfilein引入CSSfile, test不同屏幕尺寸 under 效果

on 一节: CSS Grid 布局 under 一节: CSS 动画 and 过渡