使用CSS设置不同设备的样式，可以通过媒体查询来实现。媒体查询是一种CSS技术，使得网页能够根据视口的大小和特性来应用不同的样式。通过这种方式，可以确保网页在各种设备（如手机、平板、桌面）上均有良好的显示效果。
在编写媒体查询时，可以使用`@media`规则。媒体查询通常包括条件，以确定何时应用相应的样式。比如，可以根据屏幕宽度、分辨率等来设定不同的CSS属性。
以下是一个简单的媒体查询示例，适用于多种设备：
```css/* 默认样式 */body { font-size: 16px;}/* 手机样式 */@media only screen and (max-width: 600px) { body { font-size: 14px; }}/* 平板样式 */@media only screen and (min-width: 601px) and (max-width: 900px) { body { font-size: 15px; }}/* 桌面样式 */@media only screen and (min-width: 901px) { body { font-size: 16px; }}```
这段代码在不同设备上应用了不同的字体大小。手机视口宽度为600像素或更小，字体大小设置为14像素；而平板设备在601到900像素之间时，字体大小调整为15像素；大于901像素的桌面设备则保留16像素的字体大小。
媒体查询还可以使用其他特性来进一步细化样式，如方向（横屏/竖屏）、分辨率等。通过组合这些条件，可以制定精细化的样式。
除了媒体查询，还可以利用CSS的灵活布局属性，如Flexbox和Grid，来创建响应式设计。这些工具可以帮助网页元素根据不同屏幕尺寸自动调整布局，从而避免使用固定尺寸。
例如，可以使用Flexbox属性创建流式布局，其中元素会根据可用空间进行重排。创建可以适配多种设备的界面，提升用户体验。
使用响应式设计理念，能让开发者更轻松地满足用户需求，减少代码重复。在线上展示时确保访问者获得一致的视觉效果。
在现代网页设计中，为确保良好的性能和用户体验，使用一些CSS预处理器（如Sass或LESS）也是一个不错的选择。这些工具提供高级功能，如变量和嵌套，使得媒体查询的组织和维护更加简易。
在进行不同设备样式设置时，务必进行充分的测试，确保在各种环境下的兼容性和美观性。利用开发者工具可以快速检查不同屏幕尺寸下，样式的适用性和效果。