我应该使用什么范围宽度

Question

我的网站上有一个主菜单。在默认字体样式是无数专业版之前，主菜单的填充是： -

.menu > li > a { padding: 17px 15px 15px 15px; }

我将默认字体样式更改为蒙特塞拉特。当我这样做时，主菜单在我的笔记本电脑屏幕上被破坏了。这是因为填充右15px和montesserat字体使主菜单太宽，它不适合容器，最后一个主菜单项被推到新行。 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_screen_width说我的屏幕宽度是1366px

我将填充更改为： -

.menu > li > a { padding: 17px 7px 15px 15px; }

在我的屏幕上工作并且填充右7px使得主菜单几乎延伸到容器的整个宽度，但问题在于更大的屏幕尺寸，例如屏幕宽度为1538px和宽度为1600px以及用于那些屏幕填充右7px太小，主菜单只扩展到容器宽度的一半。在较大的屏幕上，填充应该是： -

.menu > li > a { padding: 17px 35px 15px 15px; }

并填充右侧35px将使主菜单几乎延伸到容器的整个宽度，但我不能说填充右边35px就像那样，否则它会破坏我的屏幕

解决方案是使用css媒体查询： -

@media only screen and (min-width: X) and (max-width: Y) {
    .menu > li > a {padding: 17px 7px 15px 20px}
}

@media only screen and (min-width: Z) {
    .menu > li > a {padding: 17px 35px 15px 20px}
}

有效，但问题是我不知道要为X，Y和Z添加什么

http://mdsc1.ae/css/responsive.css是我正在使用的响应式样式表。有不同屏幕尺寸的样式规则。我看着： -

Base（1180 Grid）

桌面（960网格）

因为那两个申请电脑屏幕。我使用的值是X是960px（这是计算机屏幕的最小宽度），Y是1366px（这是我的屏幕宽度），Z是1367px（这是填充右边45px的最小宽度）

X没问题。我不确定我是否放置了正确的Y和Z.我担心主菜单可能会在屏幕尺寸上损坏，例如1380px的宽度和宽度1380px，屏幕尺寸应为7px，这意味着我的Y和Z值错误

我应该放置Y和Z的值，以便主菜单在所有计算机屏幕尺寸上都可以使用？

Answer 1

  

因为padding right 15px和montesserat字体也是主菜单   宽，它不适合容器和最后一个主菜单项   推到了新的一线。

您可以更改最后一个元素的填充：

.menu > li:last-child > a { padding-right: 0; }

但你需要知道：

1. 网络字体可以在不同的浏览器或设备上呈现不同的效果，您的设计不应基于您在一台设备或浏览器上看到的内容。

2. 如果您的菜单在特定分辨率上不止一行，则需要将该菜单的样式更改为其他类型的菜单。将其更改为单个下拉菜单，或通过单击菜单图标将其设置为全屏菜单。

3. 要找出视口的宽度或高度，您不需要其他网站告诉您。您可以轻松访问Chrome开发者工具或为您安装扩展程序。