[分享]CSS3按钮自动适应

CSS3按钮自动适应是指在不同的屏幕尺寸和设备上，按钮可以自动调整其大小和样式。这可以使网站在各种设备上看起来更加一致和专业。.button { fontsize: 14px; padding: 10...

CSS3按钮自动适应是指在不同的屏幕尺寸和设备上，按钮可以自动调整其大小和样式。这可以使网站在各种设备上看起来更加一致和专业。

.button {
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3f51b5;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .button {
    font-size: 12px;
    padding: 8px 16px;
  }
}

@media screen and (max-width: 480px) {
  .button {
    font-size: 10px;
    padding: 6px 12px;
  }
} 

上述代码展示了一个典型的CSS3按钮样式。在@media查询中，我们可以设置不同的属性值来适应移动设备和不同的屏幕尺寸。

在以上代码中，我们使用了max-width媒体查询来定义不同的样式，这意味着当屏幕的最大宽度为768px或480px时，按钮的字体大小和内边距将自动调整。

通过使用CSS3按钮自动适应，我们可以确保网站在各种设备上呈现出相同的外观和用户体验。这使得我们网站的用户体验更加一致和友好。