您将如何为多种屏幕尺寸编写媒体查询？

如果我想您将如何为多种屏幕尺寸编写媒体查询？

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

我只是给出了问题的例子。

来源

2011-12-21 Jitendra Vyas

这应该是我所爱this blog/website工作

@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; } }

来源

2011-12-21 18:58:35 Simone

为什么你使用'只有screen'，我看到一些人使用'MAX-width'。 – 2011-12-21 19:00:15

您也可以为每个屏幕分辨率始终包含不同的样式表。或者只是基于EM缩小一切。检查这个参考。 http://css-tricks.com/css-media-queries/ – wwwroth 2011-12-21 19:00:35

记住你仍然需要媒体块内的选择器。所以它不仅仅是'font-size：12px'它会喜欢'@media only screen和（min-width：320px）{body {font-size：12px}}' – hradac 2011-12-21 19:04:26

，因为它是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 */ 
}

来源

2011-12-21 18:59:56 Blender

因此，设备宽度是用于移动设备和平板电脑吗？ – 2011-12-21 19:01:40

我认为平板电脑会有所不同，因为有些平板电脑像移动浏览器（例如iPad），有些则不是。 – Blender 2011-12-21 19:03:44

你可以使用媒体查询。例如，对于1024字体大小，至1900年将设置这样的：

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

有关更详尽的说明，请参见响应网页设计：http://www.alistapart.com/articles/responsive-web-design/

来源

2011-12-21 19:00:48 hradac

它不会覆盖其他较低的屏幕尺寸吗？ – 2011-12-21 19:03:11

他们是我写的，是的。您需要为较小的分辨率编写其他选择器，或者添加'and（min-width：1200px）' – hradac 2011-12-21 19:06:13

使用这个代码。

@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} }

来源

2013-05-19 13:36:27

您将如何为多种屏幕尺寸编写媒体查询？

回答

相关问题