适用于移动浏览器的浏览器专用CSS

如何在Android上为不同的移动浏览器（如Opera Mobile和Firefox）制作媒体查询？当我使用某些浏览器时，CSS真的会中断。适用于移动浏览器的浏览器专用CSS

2011-07-31 needhelpwithcsshere

定义，我认为你的问题实在是太宽。例如，http://dev.opera.com/articles/tags/media%20queries/上有许多关于媒体查询的文章，但如果您以特定的更具体的术语发布您的问题，这可能是最好的。 – andreasbovens

不能直接机智CSS，但你可以使用

// target mobile devices 
@media only screen and (max-device-width: 480px) { 
    body { max-width: 100%; } 
} 

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    // CSS goes here 
} 

// should technically achieve a similar result to the above query, 
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) 
@media only screen and (min-resolution: 300dpi) { 
    // CSS goes here 
}

，你也可以在HTML

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" /> 
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="css/mobile.css" type="text/css" /> 
<link rel="stylesheet" media="only screen and (min-resolution: 300dpi)" href="css/mobile.css" type="text/css" />

来源

2011-08-07 01:47:27 coto

适用于移动浏览器的浏览器专用CSS

回答

相关问题