【发布时间】：2015-09-16 14:57:01
【问题描述】：
我的应用程序在宽屏和大屏 firefox os 设备上显示不佳？什么是适用于所有类型设备的正确媒体查询代码？
【问题讨论】：
标签： css media-queries
【发布时间】：2015-09-16 14:57:01
【问题描述】：
/*==================================================
= Bootstrap 3 媒体查询 = ==================================================== */
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
【讨论】：
-
你认为我必须关心分辨率吗？当设备的宽度更大时分辨率也更大？
-
是的，您必须在媒体查询中写入与设备宽度相关的分辨率。
-
如何同时考虑宽度和分辨率来为 HTML 标签制定响应比例？
-
您可以使用百分比值代替像素。例如，对于 6 列网格，每列的宽度为 100% ÷ 6 = 16.666667%。
-
我将使用 bootstartp。我认为这对我有用。再次感谢您的回答。祝你好运
媒体查询通常是特定于应用程序的，但如果您正在寻找通用方案，则可以使用 Bootstrap 一直在使用的方案。
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
请注意，这是假设您没有使用移动优先的方法。如果是，则需要使用
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
【讨论】：