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

Question

我的页面上有以下标题：

https://laravel.com/docs/5.7/seeding#writing-seeders

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

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

此外，我希望电话号码和电子邮件地址居中放置，并以移动尺寸在顶部放置。目前，电子邮件已丢失，电话号码仍留在左侧：

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>

Answer 2

在CSS中，断点是通过媒体查询来处理的。通常至少要使用三个断点，而更多断点则取决于目标设备：320px及以下，720px及以下以及720px及以上。以下媒体查询的目标屏幕像素范围为320像素至720像素。任何其他屏幕尺寸下的.style1类都将为60px宽。您可以添加更多媒体查询，以控制元素在不同屏幕尺寸下的样式。

.col{
    color:#fff;
    float:left;
    margin:2%;
	width: 46%;
}
.one{
  background-color: #e95b33;
}

.two{
  background-color: #40b7d7;
}

	@media screen and (max-width: 600px) { 
		.col{
			float: none;
			margin:0;
			width: 100%;
		 }
	}

<div id="container">
  <div class="row">
  	<div class="col one">
			<p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p>
	</div>
	<div class="col two">
			<p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p>
	</div>
  </div>
</div>