我有这个@media设置：
HTML：
<；头>；
<；meta name=“viewport”content=“width=设备宽度，用户可扩展=否”/>；
</头>；
CSS：
@媒体屏幕和（最小宽度：769px）{
/*这里的风格*/
}
@媒体屏幕和（最小设备宽度：481px）和（最大设备宽度：768px）{
/*这里的风格*/
}
@仅介质屏幕和（最大设备宽度：480px）{
/*这里的风格*/
}
通过这种设置，它可以在iPhone上工作，但不能在浏览器中工作
是不是因为我的meta中已经有了设备，可能有了最大宽度：480px
我发现最好的方法是为旧浏览器编写默认CSS，因为旧浏览器（包括IE 5.5、6、7和8）无法读取@media。当我使用@media时，我是这样使用它的：
<；样式类型="；text/css“&燃气轮机；
/*这里的默认样式适用于较旧的浏览器。
我倾向于使用600px-960px的最大宽度，但使用百分比
*/
@仅介质屏幕和（最小宽度：960像素）{
/*大于960px的浏览器的样式*/
}
@仅介质屏幕和（最小宽度：1440px）{
/*大于1440px的浏览器的样式*/
}
@仅介质屏幕和（最小宽度：2000px）{
/*适用于相扑大小（mac）屏幕*/
}
@仅介质屏幕和（最大设备宽度：480px）{
/*适用于小于480px的移动浏览器的样式；（iPhone）*/
}
@仅介质屏幕和（设备宽度：768px）{
/*默认iPad屏幕*/
}
/*iPad屏幕的不同技术*/
@仅介质屏幕和（最小设备宽度：481px）和（最大设备宽度：1024px）以及（方向：纵向）{
/*仅用于纵向布局*/
}
@仅介质屏幕和（最小设备宽度：481px）和（最大设备宽度：1024px）以及（方向：横向）{
/*仅适用于景观布局*/
}
</风格>；
但是你可以用你的@媒体做任何你想做的事。这只是我在为所有浏览器构建样式时发现最适合我的一个例子
iPad CSS规范
还有！如果您正在寻找可打印性，可以使用@media print{}