css - 响应式设计的媒体查询

Question

我正在尝试开发一个具有响应式设计的网站，我知道我必须使用媒体查询，我使用过它们并且它们在我的桌面上运行良好(当我调整窗口大小时外观会发生变化)。所以我想知道是否有一些“标准值”可以将它们用于智能手机/平板电脑/台式机。我看过其他问题，但太老了。

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实例。或者任何适合您的内容。