css不同分辨率设备兼容

CSS是网页设计中不可或缺的一部分，能够让设计师实现各种形式的样式和布局，但是在不同的设备上网页的显示效果有时并不完全相同。为了使网页在不同分辨率的设备上兼容，在CSS设计中需遵循以下几点：

1.使用响应式设计
响应式设计是指根据不同设备的尺寸自适应调整网页的样式和布局。在CSS中，通过使用@media查询来实现响应式设计，根据不同的设备尺寸动态改变样式。例如:
@media screen and (max-width: 480px) {
  body {
    font-size: 16px;
  }
}
这段代码表示在屏幕宽度小于等于480px时，body元素字体大小为16px。

2.使用相对单位
在设计中，应该尽可能地使用相对单位如em, rem和百分比等，而不是绝对单位如px。因为相对单位可以根据视口大小自适应调整元素大小，从而适应不同的设备尺寸。例如:
.container {
  width: 80%;
  font-size: 1em;
}
这段代码表示父元素container的宽度为视口宽度的80%，字体大小与父元素一致。

3.对图片进行适当处理
图片在网页中占据较大的空间，如果不适当处理会使网页显示效果较差。在不同分辨率的设备上，应选择合适大小的图片，避免过大或过小的图片造成页面缓慢或者变形等问题。另外，可使用CSS3的background-size属性来自适应缩放背景图片。例如：
.cover {
  background-image: url('image.jpg');
  background-size: cover;
}
.cover表示背景图片自适应缩放，填满整个元素。

以上是CSS在不同分辨率设备兼容中应遵循的一些设计技巧和方法。在实际设计中，还需要不断尝试并根据实际情况做出调整，才能实现更好的兼容性。