如何为多个屏幕尺寸编写媒体查询？

Question

如果我想要：

body {font-size:18 px} 适用于1900及以上的分辨率

body {font-size:16 px} 适用于1024到1900之间的分辨率

body {font-size:14 px} 适用于768到1023之间的分辨率

body {font-size:12 px} 适用于320到767之间的分辨率

body {font-size:11 px} 适用于0到320之间的分辨率

我只是举了一个问题的例子。

- Jitendra Vyas

Answer 1

这应该可以解决问题。

@media only screen and (min-width: 320px)  { body{ font-size: 12px; } }
@media only screen and (min-width: 768px)  { body{ font-size: 14px; } }
@media only screen and (min-width: 1024px) { body{ font-size: 16px; } }
@media only screen and (min-width: 1900px) { body{ font-size: 18px; } }

- Simone

---

为什么你使用 only screen，我看到有些人使用 max-width。 - Jitendra Vyas

你可以为每个屏幕分辨率包含不同的样式表，或者根据EM缩小所有内容。参考此链接：http://css-tricks.com/css-media-queries/ - wwwroth

请记住，在媒体块内仍需要选择器。因此，它不仅仅是 font-size:12px，而应该是 @media only screen and (min-width: 320px) { body{ font-size:12px } }。 - hradac

如果我为其他屏幕尺寸编写媒体查询，而不编写@media only screen and (min-width: 1900px) {font-size:18px}并将其保留在CSS中的body {font-size:18px}，它是否会起到相同的作用？ - Jitendra Vyas

如果我使用你的例子，那么在媒体查询之外需要指定body的字体大小吗？ - Jitendra Vyas

Answer 2

我喜欢这个博客/网站，因为它是一个关于CSS3和巧妙技巧的好资源：

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

- Blender

---

那么device-width是用于移动设备和平板电脑的吗？ - Jitendra Vyas

我认为这取决于平板电脑，因为有些像移动浏览器一样运作（例如iPad），而有些则不是。 - Blender

Answer 3

应用这段代码。

@media only screen and (max-width:319px)  { body{font-size:11px}}
@media only screen and (min-width:320px) and (max-width:767px)  { body{font-size:12px} }
@media only screen and (min-width:768px) and (max-width:1023px)  { body{font-size:14px} }
@media only screen and (min-width:1024px) and (max-width:1899px) { body{font-size:16px} }
@media only screen and (min-width:1900px) { body{font-size:18px} }

- Touhid Rahman

Answer 4

媒体查询是使用CSS来更改不同屏幕设计的一种方法。

以下是用于设计不同设备的链接：https://gist.github.com/sagarjethi/9fb395ee4422cccce625dcde5349fa52

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

- Sagar Jethi

Answer 5

你可以使用媒体查询。例如，你可以像这样设置1024到1900像素的字体大小：

@media screen and (max-width: 1900px){
    body{font-size:16px;}
}

如需更详细的解释，请参见响应式网页设计：http://www.alistapart.com/articles/responsive-web-design/

- hradac

---

它不会覆盖到其他较小的屏幕尺寸吗？ - Jitendra Vyas

我已经写好了，是的。你需要为较低的分辨率编写其他选择器或添加 and (min-width: 1200px)。 - hradac