Stuck On Media Screen Sizing

[CarraraWebsiteSolutions]

Hello just trying to work out my media screen links.

Not to sure if got correct.

For doing portrait and landscape css files for media screen is it best to do each file separate and then link them0

And when do portrait sizes 320 and 360 wide is it best to do one file or two?

[georgearnall]

It is best to use only one CSS file for your project as this reduces the amount of HTTP requests which will increase overall site performance.

You can just put the media queries for your different screen sizes after each other.

[CarraraWebsiteSolutions]

Ok slowly figuring it out learning heaps. Using bootstrap as main frame work. but adding my own touches.

This is way have set it out on my header for portrait up to 480

    <?php foreach ($links as $link) { ?>
    <link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
    <?php } ?>
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/mystore/stylesheet/normal.css" />
    <!-- Open Cart And Bootstrap CSS Files Are Imported Into Normal.css-->
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/mystore/stylesheet/smartphone.p.css" 
    media="screen and (max-width: 320px) and (orientation:portrait),
    screen and (max-width: 480px) and (orientation:portrait)"/>
    <?php foreach ($styles as $style) { ?>
    <link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
    <?php } ?> 

[Author]

Posts