[分享]css中 页面缩小 样式乱

当我们用浏览器缩小页面时，有时会发现文本重叠、布局错乱或字体太小而难以阅读。这是由于CSS中的样式并没有被正确地适应缩小后的页面大小。media screen and (maxwidth: 768px...

当我们用浏览器缩小页面时，有时会发现文本重叠、布局错乱或字体太小而难以阅读。这是由于CSS中的样式并没有被正确地适应缩小后的页面大小。

@media screen and (max-width: 768px) {
  /* 代码 */
} 

在这种情况下，我们可以使用媒体查询来适应不同尺寸的屏幕。我们可以使用CSS的“@media”规则来定义一些CSS样式，在屏幕宽度小于某个像素时启用。例如，在屏幕宽度小于768像素时，我们可以使用如上述代码块来重新定义样式。

为了解决文本重叠问题，我们可以使用“单词换行”（“word-wrap”）属性。将其设置为“break-word”可以强制浏览器在单词之间进行换行，从而避免文本重叠。例如：

p {
  word-wrap: break-word;
} 

要解决布局错乱问题，我们可以使用“弹性布局”（“flexbox”）来重新定义布局。使用flexbox可以轻松地以响应式方式设置元素之间的间距、对齐方式和布局。例如：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
} 

最后，要解决字体过小或难以阅读的问题，我们可以使用“viewport单位”。这些单位是相对于视口大小而不是屏幕大小进行设置的。例如：

body {
  font-size: 3vw;
} 

在这个例子中，我们将文本大小设置为视口宽度的3%。这意味着在所有屏幕大小上，文本都将是相同的可读大小。

因此，通过使用上述技巧，我们可以使我们的网站更加适应各种不同的屏幕大小，并提供更好的用户体验。