Question

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

我应指定哪种媒体查询宽度？

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

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

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

Answer 1

这是CSS tricks的指南 - 希望这有帮助

/ *智能手机（人像和风景）----------- / @media only screen 和（最小设备宽度：320px）和（max-device-width：480px）{ / 样式* / }

/* 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 */
}

媒体查询以定位平板电脑和手机

1 个答案: