twitter-bootstrap 引导媒体查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28735426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap Media Query not working
提问by Daniel
With twitter bootstrap i applied
使用 twitter bootstrap 我申请了
@media only screen and (min-width : 768px){
}
but this media query is working on all other width values too, such as 992px & 1200px.
但此媒体查询也适用于所有其他宽度值，例如 992px 和 1200px。
Any solution?
有什么解决办法吗？
回答by Suganya Yuvaraj
1)Please check whether you have included the meta tag in the head section of your HTML document as
1) 请检查您是否在 HTML 文档的 head 部分包含了元标记作为
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If this line is not present then none of your media query would work.
如果此行不存在，则您的任何媒体查询都不起作用。
2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.
2) 如果您在样式表中覆盖引导断点，请确保样式表正确链接到您的应用程序。
3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)
3) 了解 min-width 和 max-width 的工作原理会对您有所帮助。如果您尝试一些错误的组合，结果可能会很奇怪:)
@media (min-width:480px) {}
The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.
仅当您的视口至少为 480 像素或更宽时，才会应用此媒体查询中的样式。
@media (max-width:767px){}
The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.
此媒体查询中的样式最多只能应用于您的视口 767 像素。对于高于 767px 的任何分辨率，我们的样式将不会应用。
@media screen
This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So @media screen or @media only screen wouldn't harm your media queries much.
这说明此特定样式仅适用于屏幕，不适用于打印、投影或手持设备。所以@media screen 或@media only screen 不会对你的媒体查询造成太大伤害。
These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.
这些是我对媒体查询进行故障排除的一些技巧。希望这能帮助您解决您的问题。
回答by ketan
回答by Sarower Jahan
You can use max-width. when screen regulation is maximum 992px, then it will work.
您可以使用最大宽度。当屏幕调节最大992px时，它就会工作。
@media only screen and (max-width : 992px){
/*your styles for Tab device*/
}
You can use max-width. when screen regulation is maximum 767px, then it will work.
您可以使用最大宽度。当屏幕调节最大767px时，它就会工作。
@media only screen and (max-width : 767px){
/*your styles for mobile device*/
}
回答by Adam
Got it working now. Mobile with max only then parts from to and above 1200 is reading default.
现在开始工作了。最大只有 1200 及以上的移动设备是读取默认值。
@media (max-width: 640px) {
}
@media (min-width:640px) and (max-width: 768px) {
}
@media (min-width: 768px) and (max-width:992px){
}
@media (min-width: 992px) and (max-width:1200px) {
}
回答by priya786
i hope this may work for you Please Define it in your style.css not in bootstrap
我希望这对你有用 请在你的 style.css 中而不是在引导程序中定义它
@media (min-width:768px)
{
}
