响应式设计的媒体查询

Question

我正在尝试开发一个具有响应式设计的网站，我知道我必须使用媒体查询，我使用了它们并且它们在我的桌面上运行良好（当我调整 window 外观时改变）。所以我想知道是否有一些 'standard values' 可以与 smartphones/tablet/desktop 一起使用。我看过其他问题，但太老了。

Answer 1

在 CSS 上稍微搜索一下，您可能会发现：

http://getbootstrap.com/css/#grid-media-queries

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

基本上（如果您阅读了注释行），对于经典的 CSS（意思是没有 less/sass），您可以将 @screen-sm-min 替换为例如 768px。或者任何适合你的。

Answer 2

RWD基础知识可以参考

Google 网络基础知识 http://blog.froont.com/9-basic-principles-of-responsive-web-design/

弗朗特的基本原理http://blog.froont.com/9-basic-principles-of-responsive-web-design/

响应式设计的媒体查询

Media queries for responsive design

css

media-queries