Title: Multiple css for different screen resolutions
Last modified: August 20, 2016

---

# Multiple css for different screen resolutions

 *  [davidismyfriend](https://wordpress.org/support/users/davidismyfriend/)
 * (@davidismyfriend)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/)
 * Hello everyone,
    I am trying to have the pictures in my blog resize according
   to the screen resolution of the visitors. I would like to keep it as it is for
   a screen height of 1000 and more. But for less then 1000 I would want the pictures
   to be 700 in width.
 * [http://news.davidshama.com](http://news.davidshama.com)
 * So I thought of using multiple css…
    How can I script this in my header, I know
   there is a javascript for html to call different css:
 * <script type=”text/javascript”>
    if(screen.width<=1000) { document.write(“<link
   rel=’stylesheet’ type=’text/css’ href=’style_1000.css’ />”); } if(screen.width
   >1000) { document.write(“<link rel=’stylesheet’ type=’text/css’ href=’style.css’/
   >”); } </script>
 * But I don’t know how to do that in PHP in my header
 * Or maybe there is a plugin that allows the resizing of pictures according to 
   screen resolution, that would be great.
    Please help

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [ryanve](https://wordpress.org/support/users/ryanve/)
 * (@ryanve)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/#post-2501049)
 * You’d don’t want to do it like that. Use [media queries](http://www.w3.org/TR/css3-mediaqueries/).
 *     ```
       <link rel="stylesheet" media="all and (max-device-width:1000px)" href="small.css" />
       <link rel="stylesheet" media="all and (min-device-width:1001px)" href="large.css" />
       ```
   
 * Or (better) just make one stylesheet and use media queries in it:
 *     ```
       /* Put base styles here for below 1000px */
   
       /* Then use media query for devices above 1000px */
       @media all and (min-device-width:1001px) {
   
           /* styles here */
   
       }
       ```
   
 * Are you referring to CSS background images or images in an `img` tag? You can
   make images resizable in CSS by using `max-width:100%; height:auto;` [See this](https://github.com/ryanve/css3base/blob/master/responsive-base.css).
 *  Thread Starter [davidismyfriend](https://wordpress.org/support/users/davidismyfriend/)
 * (@davidismyfriend)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/#post-2501051)
 * Thanks ryanve,
    the single stylesheet solution seems to be the best, I’ll try
   this I am referring to images in posts so yes the img tag I guess, I am new to
   this.. I would really appreciate if you take a look to my css and help me a little
   to implement the media queries in it.
 *  Thread Starter [davidismyfriend](https://wordpress.org/support/users/davidismyfriend/)
 * (@davidismyfriend)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/#post-2501132)
 * Ok I did it! with the two additional media queries,
 * the sizes correspond to the height of the screen:
    From 0 to 870px : images are
   at 60% of their full size From 871 to 1180px: images are 75% From 1181 to more:
   100% Of course I also had to completely modify the stylesheets for each size,
   but it works great now. if you change your screen res you’ll see it change
 * Thanks again Ryanve
 *  Thread Starter [davidismyfriend](https://wordpress.org/support/users/davidismyfriend/)
 * (@davidismyfriend)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/#post-2501136)
 * img {zoom:x%} doesn’t work in firefox apparently, I am trying with -moz-transform
   but it does’t work the same way…
    That’s a huge problem how can I do a media 
   query targeting only firefox for a separate stylesheet?
 * something like this?
    <link rel=”stylesheet” media=”only (-moz)” href=”style.
   css” />

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Multiple css for different screen resolutions’ is closed to new replies.

 * 4 replies
 * 2 participants
 * Last reply from: [davidismyfriend](https://wordpress.org/support/users/davidismyfriend/)
 * Last activity: [14 years, 4 months ago](https://wordpress.org/support/topic/multiple-css-for-different-screen-resolutions/#post-2501136)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics