Question

当我在智能手机上查看我的网站时，我的一些菜单项目正在流出页面。因此，我想给这些菜单项变量padding宽度。例如，我的padding-left和padding-right目前设置为25px。这在平板电脑和计算机等大屏幕上运行良好，但在智能手机上查看时数字太高了。

我想这样做，以便我可以在屏幕上查看时将padding设置为25px，例如768px宽，但在屏幕上查看时仅15px超过768px宽。更好的是，随着浏览器尺寸变小，填充将从25px缓慢减少到15px。

我将如何做到这一点？

Answer 1

/* normal screen CSS */
@media screen and (max-width: 767px) {
  /* small screen override CSS */
}