html - 如何在某些断点处更改徽标位置

Question

我的页面上有以下标题：

当我缩小窗口时，任何小于桌面大小的电子邮件都会很快消失。

我可以在 CSS 中做什么来影响断点以及元素在某些断点上的定位？

另外，我希望电话号码和电子邮件地址居中并以移动设备大小堆叠在一起，在顶部。此刻，电子邮件不见了，电话号码留在左边：

标签： htmlcss

Answer 1

您可以在 CSS 中使用媒体查询来更改某些断点处元素的样式。

以下是如何更改布局样式的示例：

<style>

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}
</style>