CSS响应度推荐?

时间:2014-11-30 07:24:27

标签: html css html5 web

我刚刚进入CSS烦人的部分,响应能力,我的大问题是

我应该像这样处理媒体查询:min-width:xxx到max-width:xxx还是只使用最小宽度?

因为我看过一些网站,每当您调整浏览器大小或从手机输入时,它都不会从350px更改为600px,除非您使用1000px或以上,否则它几乎保持不变东西...

什么是最好的标准?或者你们在尝试使其响应时可以推荐我什么,使用这样的确切查询:min-width:xxx到max-width:xxx还是什么?

2 个答案:

答案 0 :(得分:0)

在大多数情况下,你会发现max-width通常就足够了,这实际上取决于你想要的准确程度。

Bootstrap 3.0在其CSS中有一些基本的媒体查询,我建议使用它,或者研究它。

答案 1 :(得分:0)

正如Zanderwar所提到的,这取决于你想拥有多少个断点。

就个人而言,当我构建简单的东西并且我不想使用整个Bootstrap时,我只是复制它们的断点。

请注意,它们不使用max-width,因为下一个min-width大小将充当断点。

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

您可以详细了解here

此外,请注意,大多数CSS框架倾向于推动移动优先的理念,首先设计小屏幕,然后适应平板电脑和大屏幕。

希望它有所帮助!