Media Queries详细
@media only screen and (max-device-width: 480px) { //页面最大宽度480px }
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> //外链式
@media only screen and (min-width:480px) and (max-width : 768px){ //480 < x < 768 }
device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
/* for 4:3 screen */ @media only screen and (device-aspect-ratio:4/3){ } /* for 16:9 and 16:10 screen */ @media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){ } /* for 480px*800px width screen Nexus One和Desire等手机 */ @media only screen and (device-aspect-ratio:5/3){ } /* retina分辨率 */ @media only screen and (-webkit-min-device-pixel-ratio: 2){ }