[分享]css3屏幕大小不同两种样式

CSS3是一种非常强大的网页设计语言，可以让我们更灵活地控制网页的样式和布局。在不同大小的屏幕上，我们可以通过设置不同的CSS3样式来使网页更加适配不同的设备。/ 在小屏幕上的显示 / media s...

CSS3是一种非常强大的网页设计语言，可以让我们更灵活地控制网页的样式和布局。在不同大小的屏幕上，我们可以通过设置不同的CSS3样式来使网页更加适配不同的设备。

/* 在小屏幕上的显示 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
  .header {
    background-color: #333;
    color: #fff;
    height: 80px;
  }
  .logo {
    font-size: 24px;
  }
  .nav {
    display: none;
  }
  .content {
    padding: 10px 0;
  }
}

/* 在大屏幕上的显示 */
@media screen and (min-width: 600px) {
  body {
    font-size: 16px;
  }
  .container {
    padding: 20px;
    max-width: 960px;
    margin: 0 auto;
  }
  .header {
    background-color: #eee;
    color: #333;
    height: 120px;
  }
  .logo {
    font-size: 36px;
  }
  .nav {
    display: inline-block;
    margin: 20px 0 0;
  }
  .content {
    padding: 20px 0;
  }
} 

上面的代码展示了两个不同屏幕大小下的CSS3样式。可以看到，在小屏幕下，我们将字体大小、padding、背景和显示/隐藏导航等属性进行了调整，以适应较小的屏幕。而在大屏幕下，我们应用了更大的字号和padding，使内容更加舒适，同时也加入了展示导航的属性。

通过这些不同的CSS3样式，我们可以使网页更好地适应不同尺寸的屏幕，并给用户提供更好的使用体验。