CSS 媒体查询不能 100% 工作有什么建议吗?

标签 css media-queries responsive

在我的这份新工作中,我被投入到网站 build 中。长话短说,我不是一个前端开发人员,这就是此时需要完成的全部工作。它首先是为桌面设计的,然后是媒体查询,然后缩小到更小的尺寸。全部设置为以下样式:

@media (max-width:1200px)
@media (max-width:990px)

等...

所以我不是前端设计师,对整个响应式设计还是陌生的。我已经设法让一切都响应并适合我使用这些媒体标签的方式,但是,例如,跨度 1199px - 991px 中的所有样式都使用我设置的样式,但在实际的 1200px 或 990px​​ 媒体查询中断,我只剩下一个像素范围的时髦布局。有没有更合适的方法来布局我的媒体查询,比如用最小和最大宽度来解决这个问题?或者更好的是,是否有针对我当前设置的真正简单的修复,即使它不是最实用的方法?只是想把这个网站包起来。感谢社区!

最佳答案

如果编写不当,媒体查询可能会很痛苦。

如果您想根据不同的设备(或不同的屏幕尺寸)自动调整布局,请尝试使用 Bootstrap。

它提供了简单的类,你所要做的就是将类名添加到你的div中。

例如,要使 div 适合整个屏幕,您可以添加 col-lg-12(lg 表示大)。同样,还有 md、sm 和 xs(分别为中型、小型和超小型)

引用链接:http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

关于CSS 媒体查询不能 100% 工作有什么建议吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39085873/

相关文章:

html - 如何修复底部的按钮并滚动剩余内容

javascript - 具有不同高度的响应式图片库 - 如何使用 css(或 jquery)实现这一点

css - 在基础 CSS 中将全局 CSS 值应用于移动 View ?

HTML5/CSS3 - 无法更改@media 上的字体大小

CSS光标指针闪烁一次然后恢复默认

jquery - 防止 anchor 标记触发Chrome状态栏

html - 艺术家 - 标题在移动 View 媒体查询中突出 div

ipad - 条件@import 和@media - CSS

html - 响应式电子邮件代码问题

html - 图像未在移动设备上显示