Media query

/* Link */
<head>
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)">
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">
</head>

/* for iPhone Landscape */
@media screen and (min-width:480px) { 
}
/* for iPad  */
@media screen and (min-width:768px) and ( max-width:1024px) {
}

/* for PC */
@media screen and (min-width:1024px) {

}

/* Retina */
@media screen and ( max-width:768px) and (-webkit-min-device-pixel-ratio:2){
  p {font-size: 1.2em; }  
}

//portrait
@media screen and ( max-width:768px) and (orientation:portrait){
  p {font-size: 1em; }  
}
//landscape
@media screen and (orientation:landscape){
  p {font-size: 1.2em; }  
}