从手机到电视，学会CSS轻松适配各种屏幕尺寸

随着移动互联网的快速发展，我们的设备种类越来越多，从手机、平板电脑到电视，各种屏幕尺寸和分辨率层出不穷。如何让我们的网页或应用在这些不同设备上都能展现出最佳效果，是前端开发者面临的一大挑战。CSS（层叠样式表）作为一种强大的样式设计语言，为我们提供了多种方法来实现跨屏幕适配。本文将为你详细介绍如何使用CSS轻松适配各种屏幕尺寸。

1. 响应式设计基础

响应式设计是指网页或应用能够根据不同设备的屏幕尺寸和分辨率自动调整布局和样式。实现响应式设计的关键技术包括：

媒体查询（Media Queries）：CSS媒体查询允许我们针对不同的屏幕尺寸和设备特性应用不同的样式。
弹性布局（Flexible Box Layout）：弹性布局可以自动调整元素的大小和位置，使布局在不同屏幕上保持一致性。
弹性图片（Responsive Images）：通过使用<img>标签的srcset和sizes属性，可以为不同屏幕尺寸提供不同尺寸的图片。

2. CSS媒体查询

媒体查询是响应式设计中最常用的技术之一。它允许我们根据不同的屏幕尺寸和特性应用不同的样式规则。以下是一个简单的媒体查询示例：

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

/* 当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于600px且小于900px时 */
@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* 当屏幕宽度大于900px时 */
@media screen and (min-width: 900px) {
  body {
    font-size: 20px;
  }
}

在这个例子中，我们根据不同的屏幕宽度设置了不同的字体大小，实现了基本的响应式布局。

3. 弹性布局

弹性布局可以自动调整元素的大小和位置，使布局在不同屏幕上保持一致性。以下是一个简单的弹性布局示例：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  text-align: center;
  padding: 10px;
}

在这个例子中，.container 元素使用display: flex; 属性创建了一个弹性容器，.item 元素则通过flex: 1; 属性均匀分配了容器宽度。

4. 弹性图片

弹性图片允许我们根据不同屏幕尺寸提供不同尺寸的图片。以下是一个使用srcset和sizes属性的例子：

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px" 
     alt="Responsive image">

在这个例子中，根据屏幕宽度，浏览器会自动选择最合适的图片加载。

5. 常用CSS技巧

以下是一些常用的CSS技巧，可以帮助你更好地实现跨屏幕适配：

使用百分比、em、rem等相对单位代替固定单位，如px。
使用max-width和min-width属性设置元素的宽度和高度范围。
使用overflow属性控制元素溢出的内容。
使用border-radius属性为元素添加圆角效果。
使用box-shadow属性为元素添加阴影效果。