twitter-bootstrap Bootstrap 多分辨率所有布局内联媒体查询 CSS，用于响应式设计，包括 Android iphone 和 web asp.net
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18416258/
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 multiple resolution all layout inline media query CSS for responsive design including Android iphone and web asp.net
提问by skhurams
I have finished a website, it's working fine in browser now. I have been asked to make it compatible with Android, iPhone, iPad, Tablets,and web etc. I'm using bootstrap asp.net.
我已经完成了一个网站，它现在在浏览器中运行良好。我被要求使其与 Android、iPhone、iPad、平板电脑和网络等兼容。我正在使用 bootstrap asp.net。
Now I'm trying and couldn't find any answer. I'm using these inline media queries
现在我正在尝试，但找不到任何答案。我正在使用这些内联媒体查询
@media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
@media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
@media screen and (min-width:481px) and (max-width:540px){/*Any css will be defined here*/}
@media screen and (min-width:541px) and (max-width:775px){/*Any css will be defined here*/}
@media screen and (min-width:768px) and (max-width:783px){/*Any css will be defined here*/}
@media screen and (min-width:776px) and (max-width:1536px){/*Any css will be defined here*/}
@media screen and (min-width:1537px){/*Any css will be defined here*/}
But in some iPads the CSS is not applied. Now my question is, what's the standard resolution and orientation for @media which will cover all (Android, iPhone, tablets and Web etc) CSS?
但在某些 iPad 中，CSS 并未应用。现在我的问题是，@media 将涵盖所有（Android、iPhone、平板电脑和 Web 等）CSS 的标准分辨率和方向是什么？
回答by user5623896726
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio : 1.5),
and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
That's what I use, and it works for almost everything.
这就是我使用的，它几乎适用于所有事物。
回答by skhurams
After spending many hours I found this helpful. This is used by Bootstrap itself and I followed that. It will cover all the devices (Android, iPhone Tabs and web etc).
花了很多小时后，我发现这很有帮助。这是 Bootstrap 本身使用的，我遵循了它。它将涵盖所有设备（Android、iPhone 标签和网络等）。
@media handheld, only screen and (max-width: 2200px)
{
/* Styles */
}
@media handheld, only screen and (max-width: 1200px)
{
/* Styles */
}
@media handheld, only screen and (max-width: 1024px)
{
/* Styles */
}
@media handheld, only screen and (max-width: 767px) {
/* Styles */
}
@media handheld, only screen and (max-width: 600px) {
/* Styles */
}
@media handheld, only screen and (max-width: 500px) {
/* Styles */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Styles */
}
