基于设备而不是宽度使用CSS @media

@media是CSS中的一个关键字，用于根据设备的特性来应用不同的样式规则。它可以根据设备的宽度、高度、分辨率、屏幕方向等特性来选择性地应用不同的样式。

@media规则通常与@media查询结合使用，用于根据不同的设备特性应用不同的样式。例如，可以使用@media查询来检测设备的宽度，并根据宽度的不同应用不同的样式规则。

@media查询可以使用以下语法：

@media 媒体类型 and (媒体特性) { CSS样式规则 }

其中，媒体类型可以是all（所有设备）、screen（屏幕设备）、print（打印设备）等。媒体特性可以是width（宽度）、height（高度）、orientation（方向）等。

使用@media规则可以实现响应式设计，使网页能够适应不同的设备和屏幕尺寸。通过定义不同的样式规则，可以使网页在不同的设备上呈现出最佳的布局和用户体验。

以下是一些常见的@media查询示例：

1. 根据设备宽度应用不同的样式：

@media screen and (max-width: 768px) { /* 在宽度小于等于768px的设备上应用的样式 */ }

@media screen and (min-width: 769px) and (max-width: 1024px) { /* 在宽度在769px到1024px之间的设备上应用的样式 */ }

@media screen and (min-width: 1025px) { /* 在宽度大于等于1025px的设备上应用的样式 */ }

1. 根据设备方向应用不同的样式：

@media screen and (orientation: portrait) { /* 在竖屏设备上应用的样式 */ }

@media screen and (orientation: landscape) { /* 在横屏设备上应用的样式 */ }

1. 根据设备分辨率应用不同的样式：

@media screen and (min-resolution: 300dpi) { /* 在分辨率大于等于300dpi的设备上应用的样式 */ }

@media screen and (max-resolution: 72dpi) { /* 在分辨率小于等于72dpi的设备上应用的样式 */ }

应用场景： @media可以在响应式网页设计中起到关键作用，使网页能够适应不同的设备和屏幕尺寸。通过定义不同的样式规则，可以实现在不同设备上呈现出最佳的布局和用户体验。

推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储等。以下是一些与CSS @media相关的腾讯云产品：

1. 云服务器（CVM）：腾讯云提供了弹性计算服务，可以根据业务需求快速创建、部署和管理云服务器。通过使用云服务器，可以灵活地调整服务器的配置和规模，以适应不同的设备和访问需求。了解更多：https://cloud.tencent.com/product/cvm
2. 云数据库MySQL版（CDB）：腾讯云提供了高性能、可扩展的云数据库服务，支持MySQL数据库。通过使用云数据库，可以存储和管理网站或应用程序的数据，以支持不同设备上的访问和使用。了解更多：https://cloud.tencent.com/product/cdb_mysql
3. 云存储（COS）：腾讯云提供了安全可靠的云存储服务，用于存储和管理各种类型的数据，包括图片、音视频文件等。通过使用云存储，可以在不同设备上快速加载和展示媒体文件。了解更多：https://cloud.tencent.com/product/cos

请注意，以上推荐的产品仅供参考，具体选择应根据实际需求和业务场景进行评估和决策。