<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" />
<link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" />
<link rel="stylesheet" media= "all and (min width: 319px) and (max width: 1281px) and not desktop and not (width: 352px; height: 416px) " href="NormalTouchPhones.css" />
Is this a VALID way to set up a stylesheet targeting regular touch-phones but excluding small Nokia devices with exact dimensions of 352px in width and 416px in height?
media= "all and (mid widht: 175px) and (max-widht: 353px) and (min-height: 207px) and (max-height: 321px)and not desktop" href="smallNokias.css"
I have also included the following code in my index file.
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8.css" media="screen" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I have arranged my stylesheets in descending order starting with desktop styling, followed by notepads, bigger touch-phones, and finally the smallest phones like Nokia's and Sony-Ericsson's. I would appreciate any feedback on whether this approach is correct or suggestions for improvement. Thank you!