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。或者适合你的任何事情。

Answer 2

您可以参考RWD的基础知识

Google Web Fundamentals http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Froont的基本原则http://blog.froont.com/9-basic-principles-of-responsive-web-design/

媒体查询响应式设计

2 个答案: