Html 针对平板电脑和手机的媒体查询

我们正在开发一个Web应用程序。 主要范围是针对不同的平板电脑分辨率和浏览器。 一些是安卓5、7和10英寸以及iPhone 5、7和10英寸。 我们正在使用jQuery Mobile和MVC来针对不同的浏览器，但针对不同的分辨率，我们发现media query将有助于调整字体大小、div宽度等

我应该指定什么媒体查询宽度？

@media screen and (min-width: 768px)
{
}

目标android 5、7和10英寸以及iphone 5、7、10的最小宽度和最大宽度

我看到了不同的堆栈溢出问题，但对他们给出的答案不满意。

这是来自的指南-希望这有帮助

/*智能手机（纵向和横向）/ @仅媒体屏幕 和（最小设备宽度：320px） 和（最大设备宽度：480px）{ /风格*/ }

---

JQM对任何决议都有响应。只需确保添加viewport meta标记。您是否希望它能够使应用程序响应—这样，如果您将浏览器窗口设置为与手机相同的大小—它们将具有相同的外观和感觉？@Omar ya JQM看起来很棒。但是如何定义标签的字体大小呢？字体大小为%的标签在10英寸平板电脑上看起来不错，但在7英寸平板电脑上变成了2行。@wildandjam:是的。。但是现在我们只支持tabletI，我只是问，因为max width会给你这个，而max device width会给你一个不同的体验。因此，坚持最大宽度。这里有一些关于像素密度的东西，让我试着给你一个链接。。。。

/* 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),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}