CSS进阶指引

当您已经了解了CSS基础知识之后，您可以开始学习CSS进阶内容。下面是我建议的学习方法及一些实用技巧。

相对单位

在设计现代网站时，经常需要使用百分比和em（或rem）两种相对单位。百分比单位用于布局和呈现响应式设计，而em（或rem）用于设置字体大小，允许字体以缩放方式自适应其容器和屏幕大小。

百分比单位

百分比单位可以相对于它的容器进行计算。例如，您可以使用百分比设置一个元素在其容器中的宽度，该容器宽度基于视口宽度的百分比，实现响应式设计。

.container{
  width: 80%;
  margin: 0 auto;
}

.box{
  width: 50%;
  float: left;
}

em和rem单位

em和rem单位都可以相对于父元素进行计算。em单位根据父元素的字体大小进行计算，而rem则根据根元素的字体大小进行计算。使用这两种相对单位可以帮助您为不同大小的屏幕和设备调整字体大小。

body{
  font-size: 16px;
}

h1{
  font-size: 2.5em; /* 40px */
}

h2{
  font-size: 1.5rem; /* 24px */
}

媒体查询

媒体查询允许您根据屏幕大小和其他设备属性调整网页的样式。这使得您可以为特定设备或屏幕大小提供不同的设计，从而创建一个响应式网站。

/* 在小于600像素的屏幕上使用不同的样式 */
@media(max-width: 600px){
  .menu{
    display: none;
  }

  .icon{
    display: block;
  }
}

示例

以下是一个使用相对单位和媒体查询的例子，创建了一个响应式的卡片布局。

<section>
  <div class="card">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button>Learn More</button>
  </div>

  <div class="card">
    <h2>Dolor Sit Amet</h2>
    <p>Nullam laoreet arcu sit amet velit ultricies.</p>
    <button>Learn More</button>
  </div>

  <div class="card">
    <h2>Consectetur Adipiscing</h2>
    <p>Sed euismod, urna eget iaculis interdum.</p>
    <button>Learn More</button>
  </div>
</section>

<style>
section{
  display: flex;
  flex-wrap: wrap;
}

.card{
  width: 30%;
  margin: 1%;
  padding: 1%;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

h2{
  font-size: 1.5em;
}

p{
  font-size: 1.1em;
}

button{
  font-size: 1em;
}

@media(max-width: 600px){
  .card{
    width: 100%;
  }
}
</style>

在此示例中，我们使用百分比单位为卡片容器设置宽度，以便在不同大小的屏幕上正确显示。我们还使用媒体查询，在小于600像素的屏幕上将卡片容器的宽度设置为100%。这使得在小的屏幕上卡片布局始终具有最佳外观和确切的尺寸。