1. 什么是响应式设计？
响应式网页设计（Responsive Web Design, RWD）是一种网页开发方法，使网站能够自动适应不同设备的屏幕尺寸和方向，提供最佳的浏览体验。其核心三大技术支柱：
- 流动布局（Fluid Grids）
- 弹性媒体（Flexible Media）
- 媒体查询（Media Queries）
1. 基础配置
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">2. 各属性解析
3. 特殊场景处理
iOS安全区域适配(css)：
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}1. 基础语法
css
@media [媒体类型] and (媒体特性) {
/* CSS规则 */
}2. 常用断点设置
css
/* 超小设备（手机，<576px） */
@media (max-width: 575.98px) { ... }
/* 小设备（平板，≥576px） */
@media (min-width: 576px) { ... }
/* 中等设备（小桌面，≥768px） */
@media (min-width: 768px) { ... }
/* 大设备（桌面，≥992px） */
@media (min-width: 992px) { ... }
/* 超大设备（大桌面，≥1200px） */
@media (min-width: 1200px) { ... }3. 高级查询示例
横竖屏检测(css)：
3. 高级查询示例
横竖屏检测(css)：
@media (orientation: portrait) {
/* 竖屏样式 */
}
@media (orientation: landscape) {
/* 横屏样式 */
}高分辨率屏幕适配(css)：
高分辨率屏幕适配(css)：
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* 高清屏专用样式 */
}1. srcset属性详解
html
1. srcset属性详解
html
<img src="image-default.jpg"
srcset="image-small.jpg 480w,
image-medium.jpg 768w,
image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 768px,
1200px"
alt="响应式图片示例">参数说明：
-
w描述符：表示图像源文件的宽度 sizes：定义不同视口宽度下图像的显示尺寸
2. picture元素高级用法
html
2. picture元素高级用法
html
html
html
<picture>
<!-- AVIF格式（更高效） -->
<source type="image/avif"
srcset="image.avif 1x, image@2x.avif 2x">
<!-- WebP格式（广泛支持） -->
<source type="image/webp"
srcset="image.webp 1x, image@2x.webp 2x">
<!-- 回退JPEG -->
<img src="image.jpg"
srcset="image@2x.jpg 2x"
alt="艺术指导示例"
loading="lazy">
</picture>3. 性能优化技巧
html+JavaScript
3. 性能优化技巧
html+JavaScript
html+JavaScript
html+JavaScript
html+JavaScript
html+JavaScript
<img src="placeholder.jpg"
src="real-image.jpg"
class="lazyload"
alt="懒加载示例">
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>1. 移动优先工作流程
- 从最小屏幕开始设计
- 逐步增强到大屏幕
- 使用渐进增强策略
2. 移动优先CSS编写模式
css
1. 移动优先工作流程
- 从最小屏幕开始设计
- 逐步增强到大屏幕
- 使用渐进增强策略
2. 移动优先CSS编写模式
2. 移动优先CSS编写模式
2. 移动优先CSS编写模式
css
css
/* 基础移动样式（无媒体查询） */
.container {
padding: 15px;
font-size: 14px;
}
/* 平板适配 */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 16px;
}
}
/* 桌面适配 */
@media (min-width: 992px) {
.container {
max-width: 1140px;
margin: 0 auto;
font-size: 18px;
}
}
3. 移动交互优化
触摸目标尺寸(css)：
3. 移动交互优化
3. 移动交互优化
触摸目标尺寸(css)：
触摸目标尺寸(css)：
button, a[role="button"] {
min-width: 44px;
min-height: 44px;
}避免悬停陷阱(css)：
@media (hover: none) {
.dropdown:hover .dropdown-menu {
display: none;
}
}1. Flexbox响应式导航
html+css+JavaScript
<nav class="main-nav">
<div class="logo">LOGO</div>
<button class="menu-toggle">☰</button>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<style>
.main-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
}
.nav-list {
display: flex;
list-style: none;
margin-left: auto;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
margin-left: auto;
}
.nav-list {
display: none;
flex-basis: 100%;
}
.nav-list.active {
display: flex;
flex-direction: column;
}
}
</style>
<script>
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.nav-list').classList.toggle('active');
});
</script>2. 响应式网格系统
css
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.grid-item {
background: #f5f5f5;
padding: 20px;
border-radius: 5px;
}
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}1. 图片加载闪烁问题
问题： 媒体查询切换时图片重新加载
解决方案(css)：
.responsive-image {
background-image: url('small.jpg');
background-size: cover;
}
@media (min-width: 768px) {
.responsive-image {
background-image: url('medium.jpg');
}
}
@media (min-width: 1200px) {
.responsive-image {
background-image: url('large.jpg');
}
}2. 表格响应式处理
css
css
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
table {
display: block;
width: 100%;
}
tr {
display: block;
margin-bottom: 15px;
}
td {
display: block;
text-align: right;
}
td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}1. 浏览器开发者工具
-
设备模拟器
测试不同屏幕尺寸 -
网络限速
模拟移动网络环境 - CSS媒体查询调试
2. 在线测试平台
Most Reliable App & Cross Browser Testing Platform | BrowserStack
Responsive Website Design Tester | Media Genesis
1. 浏览器开发者工具
CSS布局进阶：
Flexbox弹性布局 CSS Grid布局系统 多列布局（Multi-column）
性能优化：
关键渲染路径优化 图片懒加载 资源预加载
现代CSS特性：
CSS变量（Custom Properties） 容器查询（Container Queries） 层叠上下文（CSS Layers）
下期预告：我们将深入探讨 HTML表单进阶，viewport元标签、高级表单验证技巧、表单辅助元素（datalist、output）等！
实践任务：
将一个现有静态页面改造成响应式布局 实现一个根据屏幕尺寸自动切换的导航菜单 为你的网站添加响应式图片支持
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
