Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write different HTML for different screen sizes

I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")

but let's say I want to write (just for example)

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

What is the condition I need to write to get it right?

like image 849
Alon Avatar asked Nov 28 '11 10:11

Alon


People also ask

Which CSS techniques can be used to define different styles for different screen sizes?

In CSS3, you can define styles depending on the page width. As page width correlates with the size of the user's device, this capability thus allows you to define different layouts for different devices. Note: media queries are supported by all major browsers.


2 Answers

As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.

But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?

Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)

like image 71
Jan Dragsbaek Avatar answered Oct 15 '22 05:10

Jan Dragsbaek


I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:


    <div>
    [text that will be shown for screens less or equal to 960px in width]
        <div class="smallScreen">
        some new text only for lower resolution
        </div>
    [end of condition for small screens]

    [text that will be shown for other screens that are greater in width]
        <div class="largeScreen">
        some new text only for higher resolution
        </div>
    </div>

And then you could add CSS:

    /* On smaller resolutions, hide the text for Large screens */
    @media only screen and (max-width: 960px) {
        .largeScreen {display: none;}
   }

   /* On larger resolutions, hide the text for Small screens */
    @media only screen and (min-width: 960px) {
        .smallScreen {display: none;}
   }

I hope this works out fine :)

like image 41
IPSDSILVA Avatar answered Oct 15 '22 05:10

IPSDSILVA