我刚刚进入CSS烦人的部分,响应能力,我的大问题是
我应该像这样处理媒体查询:min-width:xxx到max-width:xxx还是只使用最小宽度?
因为我看过一些网站,每当您调整浏览器大小或从手机输入时,它都不会从350px更改为600px,除非您使用1000px或以上,否则它几乎保持不变东西...
什么是最好的标准?或者你们在尝试使其响应时可以推荐我什么,使用这样的确切查询:min-width:xxx到max-width:xxx还是什么?
答案 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框架倾向于推动移动优先的理念,首先设计小屏幕,然后适应平板电脑和大屏幕。
希望它有所帮助!