linkedin、facebook 或 quora 使用什么 css 样式表

Question

我一直想知道 linkedin 、 facebook 或 quora 是如何设计他们的网站的。当我在浏览器中以响应模式看到他们的网站时，我发现他们的网站固定在 1000px 或 1100px 点并且内容没有改变，但是当我在移动设备上看到他们的网站时，它看起来还不错。他们是怎么做到的？

编辑：- 为了使问题更具体。只需打开您的浏览器并访问 linkedin、quora 或 facebook。 Toogle 响应模式（在 firefox ctrl+shift+m 中）并保持屏幕尺寸慢慢变小，然后低于 1000px 或 1100px 内容得到修复并且它不会改变。我熟悉媒体查询，根据媒体查询，内容应该根据您正在阅读此 question.Try 的当前页面这样的页面进行响应，以切换响应模式并查看当前页面的内容如何响应不同的内容屏幕尺寸，但如果 linkedin、facebook 或 quora 低于 1000px 和 1100px，内容不会响应。

Answer 1

他们使用@media 指令。它对于制作断点很有用。一些例子：

/*--- Example 1 ---*/

/* Normally .box is 100% width */
.box {
  width: 100%;
}
/* But on screens with width > 100px */
@media screen and (min-width: 1000px) {
  /* It is only 50% width */
  .box {
    width: 50%;
  }
}

/*--- Example 2 ---*/

/*If screen is 200px width or smaller*/
@media screen and (max-width: 200px) {
  /*Show special warning*/
  .too-small-browser {
    display: block;
  }
}

/*--- Example 3 ---*/

/* @media can be used not only for responsive resize */
@media print {
  /*Hide .navbar, .ads, and .footer while printing*/
  .navbar, .ads, .footer {
    display: none;
  }
}

更多：https://developer.mozilla.org/docs/Web/CSS/@media

linkedin、facebook 或 quora 使用什么 css 样式表

What css stylesheet is used by linkedin, facebook or quora

css

responsive-design