CSS medidas para diseño web adaptativo

CSS, sugerencia de medidas y notas para diseño web adaptativo (Responsive Design).

Medidas

960px
768px
480px
320px
200px

 

/************************* Base ******************************/
/************************* Ejemplo. 960px ******************************/
/*style.css*/

/************************* Responsive Design ******************************/
/************************* 960px - 1200px ******************************/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    
}

/************************* 768px - 960px ******************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
}

/************************* 480px - 768px ******************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}

/************************* 320px - 480px ******************************/
@media only screen and (min-width: 320px) and (max-width: 479px) {
    
}

/************************* 200px - 320px ******************************/
@media only screen and (min-width: 0px) and (max-width: 319px) {
    
} 

Icono

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="/img/WMB_57x57.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="/img/WMB_72x72.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="/img/WMB_114x114.png" />
<!-- No such device exists yet, so if this value is used, it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="/img/WMB_228x228.png" />