Question

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

@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％进行编码。

任何其他缩放级别的任何内容都不在您的控制范围内，几乎在每个浏览器中它的行为都不同，您无法确定跨浏览器/跨设备的缩放级别（在某些情况下您无法确定）完全决定它，或者他们甚至可能对它有所了解）。

缩放的重点是远离您或网站控制并将其提供给用户。他们可以选择放大或缩小内容，自愿放弃＆＃34;像素完美＆＃34; 质量，支持可读性或鸟类。眼睛视图。设计时不要改变缩放级别。如果这样做，您的设计将在许多设备/浏览器组合上失败。

更重要的是，浏览器缩放机制是基于传统的假设，即您的网页是＆＃34;正常＆＃34;在缩放级别100％。如果你改变它，你不仅会在100%打破你的网站，但最有可能的是，你也会在其他缩放级别打破它，这是对可访问性和可用性的重大打击。不要这样做。

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

关于@media查询：所有代码都是惯例。当你告诉浏览器做某事时，它会这样做。将规则放在

中

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

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

以下是使用移动优先方法（大多数现代框架使用）应用响应性的示例：

＆＃13;

/* 
 * 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)'}
}

＆＃13;

<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>

＆＃13;

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

我也看到人们总是使用@media撰写他们的only screen查询只是因为他们已经在示例中看到了这些查询，不知道它做了什么，并且害怕不打破东西，后来才问为什么他们的款式不适用于印刷品。原则是一样的：

在screen个查询之外的print和@media上放置您想要应用的任何样式
将您想要的每个样式专门应用于screen或print查询@media或only screen内的only print。

虽然print和screen是最常见的媒体类型，但还有其他几种：braille，embossed，handheld，{{1} }，projection，speech，tty。媒体类型的默认值为tv。

打开chrome dev工具时响应式站点中断

1 个答案: