[分享]css不同屏幕分辨率

pre { white-space: pre-wrap; word-wrap: break-word; }

在web开发中，不同的设备拥有不同的屏幕分辨率，而这对于CSS布局和设计来说是一个重大的挑战。

CSS的设计目标之一是让网站能够在所有设备上显示完美的布局。因此，我们必须考虑到不同的屏幕分辨率，以确保CSS代码能够适应各种设备，从而使网站在不同的分辨率下都能呈现出优秀的样式。

CSS提供了一些技术来解决这个问题。

第一个技术是使用百分比值，因为它们是相对于包含块的大小来计算的。这意味着可以使用百分比值来设置容器宽度、高度，或者内边距等属性，从而能够自适应不同的屏幕分辨率。

.container {
  width: 90%;
  margin: auto;
} 

第二个技术是使用CSS3的“媒体查询”功能，可以创建针对不同屏幕尺寸的样式表。通过针对特定的屏幕尺寸和分辨率来编写针对性的样式，可以实现可适配的布局。

/* 进行媒体查询 */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
} 

上面的代码将针对屏幕最大宽度为768px的设备应用特定的样式。这样一来，当用户浏览该网站时，CSS会根据响应式设计自动调整布局。

CSS提供许多其他针对不同屏幕分辨率的样式选择器和属性，这些工具可以使CSS布局和设计更加适应不同的屏幕分辨率，从而使网站在所有设备上都有出色的表现。