媒体侦测不同设备尺寸

device.css

/**
 * Note that the following media queries are intended to be used for the specified device or screen size
 * in both portrait and landscape mode.
 *
 * Desktop queries are not provided since the default styles for most sites and applications typically focus
 * on that for the default sites.
 *
 * Contributes, comments, and all that fun stuff always welcome :).
 */
 
/* iPhone */
@media (min-width: 320px) and (max-width: 480px) {
 
}
 
/* iPhone 5 */
@media (min-width: 320px) and (max-width: 568px) {
 
}
 
/* Tablet */
@media (min-width: 600px) and (max-width: 800px) {
 
}
 
/* iPad 2, 3, mini */
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/* Handheld. Handles both portrait and landscape. */
@media (min-width: 320px) and (max-width: 568px) {
 
}
 
/* Tablet. Handles both portrait and landscape. */
@media (min-width: 600px) and (max-width: 800px) {
 
}