css - 打开 chrome 开发工具时，响应式网站中断

Question

我正在设计一个网站并使其具有响应性。我已经添加了媒体查询，但是当我在 min-width: 320px 的断点处打开 chrome 开发工具时，站点中断(基本上所有的 css 样式都消失了)。当我将窗口大小缩放到 150% 时，我遇到了同样的问题，所有屏幕宽度 320px、481px、641px 等上的样式都消失了(这是没有打开 chrome 开发工具)。如何解决这个问题？

@media only screen and (min-width: 320px){
  //when chrome dev tool is opened, none of the styles in this breakpoint get applied
}

Answer 1

缩放级别:您只能在缩放级别 100% 时编写代码。

任何其他缩放级别的内容都不受您的控制，它在几乎每个浏览器中的行为都不同，您无法确定跨浏览器/跨设备的缩放级别(在某些情况下您无法确定)根本或者，或者他们甚至可能对此有所隐瞒)。

缩放的全部意义在于将控制权从您或网站上移交给用户。他们可以选择放大或缩小查看内容，并愿意放弃“像素完美”质量以支持可读性或鸟瞰图。设计时不要更改缩放级别。如果这样做，您的设计将在许多设备/浏览器组合上惨遭失败。

更重要的是，浏览器缩放机制是基于您的页面在缩放级别 100% 时“正常”的传统假设。如果您更改它，您不仅会在 100% 时破坏您的网站，而且很可能还会在其他缩放级别破坏它，这对可访问性和可用性是一个重大打击。不要这样做。

此外，大多数用户期望并且不介意在放大/缩小页面中看起来不完美的东西，但与此同时，他们期望在 100% 缩放级别下像素完美的质量。就像你自己一样。ツ

---

关于@media 查询:所有代码都是约定俗成的。当你告诉浏览器做某事时，它就会去做。通过将您的规则放在

@media (min-width: 320px) {
  // code here
}

您是在告诉浏览器:仅当设备声明的 CSS 像素宽度大于 320px 时才应用这些规则。如果您还希望在屏幕小于 320px 时应用这些内容，请删除或修改您的媒体查询。

---

这是一个使用移动优先方法(大多数现代框架都使用)来应用响应的示例:

/* 
 * general rules applying for all cases 
 */

.example { color: red; }
.example:before {content: 'general (applies everywhere, unless overridden)'}

@media (min-width:576px) {
  /* applying only from $sm up */
  .example { color: blue; }
  .example:before {content: '$sm (applies above 576px)'}
}

@media (min-width:768px) {
  /* applying only from $md up  */
  .example { color: green; }
  .example:before {content: '$md (applies above 768px)'}
}

@media (min-width:992px) {
  /* applying only from $lg up */
  .example { color: gray; }
  .example:before {content: '$lg (applies above 992px)'}
   
}

@media (min-width:1200px) {
  /* applying only from $lg up */
  .example { color: black; }
  .example:before {content: '$xl (applies above 1200px)'}
}

<h1 class="example"></h1>
<ul>
<li style="color:red">general</li>
<li style="color:blue">$sm</li>
<li style="color:green">$md</li>
<li style="color:gray">$lg</li>
<li style="color:black">$xl</li>
</ul>

注意 @media 不会增加特异性。它仅限制何时考虑代码，何时不考虑。

我还看到人们总是使用 only screen 编写他们的 @media 查询，只是因为他们在示例中看到了它，不知道它的作用并且害怕不要破坏东西，只是后来问为什么他们的风格不适用于打印。原理是一样的:

• 将您想要应用到 screen 和 print 的任何样式放在任何 @media 查询之外
• 将您想要专门应用于 screen 或 print 的每个样式放入 @media 查询中，并使用 only screen 或只打印。

虽然 print 和 screen 是最常见的媒体类型，但还有一些其他媒体类型:braille、embossed、手持、投影、语音、tty、tv。媒体类型的默认值为all。