响应式设计

响应式设计简介

响应式设计是一种网页设计方法，使网页能够根据不同的设备屏幕尺寸和分辨率自动调整布局和样式。

视口设置

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

视口属性

<!-- 基本设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 禁止缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- 宽度设置 -->
<meta name="viewport" content="width=device-width">  /* 设备宽度 */
<meta name="viewport" content="width=1200">           /* 固定宽度 */

媒体查询

基本语法

@media screen and (min-width: 768px) {
  .container {
    width: 750px;
  }
}

媒体查询类型

/* all: 所有设备 */
@media all and (min-width: 768px) {
}

/* screen: 屏幕设备 */
@media screen and (min-width: 768px) {
}

/* print: 打印设备 */
@media print and (min-width: 768px) {
}

媒体查询特性

/* 宽度 */
@media (min-width: 768px) {
}

@media (max-width: 1024px) {
}

/* 高度 */
@media (min-height: 600px) {
}

@media (max-height: 800px) {
}

/* 方向 */
@media (orientation: portrait) {
}

@media (orientation: landscape) {
}

/* 分辨率 */
@media (min-resolution: 2dppx) {
}

/* 颜色 */
@media (color) {
}

@media (min-color: 8) {
}

逻辑操作符

/* and: 并且 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* or: 或者 */
@media screen and (min-width: 768px), print {
}

/* not: 非 */
@media not screen and (min-width: 768px) {
}

/* only: 只有 */
@media only screen and (min-width: 768px) {
}

常用断点

/* 移动设备 */
@media (max-width: 576px) {
}

/* 平板设备 */
@media (min-width: 577px) and (max-width: 768px) {
}

/* 桌面设备 */
@media (min-width: 769px) and (max-width: 992px) {
}

/* 大屏设备 */
@media (min-width: 993px) and (max-width: 1200px) {
}

/* 超大屏设备 */
@media (min-width: 1201px) {
}

响应式布局

1. 流式布局

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.column {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .column {
    width: 33.33%;
  }
}

2. Flexbox 响应式

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  .item {
    flex: 0 0 50%;
  }
}

@media (min-width: 768px) {
  .item {
    flex: 0 0 33.33%;
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 0 0 25%;
  }
}

3. Grid 响应式

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}

@media (min-width: 576px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

4. 自动适应 Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

响应式图片

1. srcset 属性

<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
     sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"
     alt="响应式图片">

2. picture 元素

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="响应式图片">
</picture>

3. 不同格式

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="图片描述">
</picture>

响应式字体

1. 相对单位

/* em: 相对于父元素字体大小 */
body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  /* 32px */
}

/* rem: 相对于根元素字体大小 */
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;  /* 32px */
}

/* vw/vh: 相对于视口宽度/高度 */
h1 {
  font-size: 5vw;  /* 视口宽度的5% */
}

2. 媒体查询字体

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

3. clamp() 函数

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

实际应用

1. 响应式导航栏

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu {
  display: none;
}

@media (min-width: 768px) {
  .menu {
    display: flex;
    gap: 20px;
  }
}

.menu-toggle {
  display: block;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

2. 响应式卡片

.card-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  padding: 20px;
}

@media (min-width: 576px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

3. 响应式表单

.form {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .form-row {
    display: flex;
    gap: 20px;
  }
  
  .form-row .form-group {
    flex: 1;
  }
}

面试常见问题

1. 什么是响应式设计？

响应式设计是一种网页设计方法，使网页能够根据不同的设备屏幕尺寸和分辨率自动调整布局和样式。

2. 媒体查询的常用断点？

@media (max-width: 576px) {  /* 移动设备 */ }
@media (min-width: 577px) and (max-width: 768px) {  /* 平板设备 */ }
@media (min-width: 769px) and (max-width: 992px) {  /* 桌面设备 */ }
@media (min-width: 993px) {  /* 大屏设备 */ }

3. rem 和 em 的区别？

• rem: 相对于根元素（html）的字体大小
• em: 相对于父元素的字体大小

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;  /* 32px */
}

p {
  font-size: 1em;   /* 继承父元素字体大小 */
}

4. 如何实现响应式图片？

<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
     sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"
     alt="响应式图片">

5. 如何使用 Grid 实现响应式布局？

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

通过理解响应式设计的各种技术和最佳实践，可以创建适应各种设备的网页。