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.

    https://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)

  • You’d don’t want to do it like that. Use media queries.

    <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.

    Thread Starter davidismyfriend

    (@davidismyfriend)

    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

    (@davidismyfriend)

    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

    (@davidismyfriend)

    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.