How to write different HTML for different screen sizes

html css mobile screen-resolution responsive-design
Alon picture Alon · Nov 28, 2011 · Viewed 31.2k times · Source

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?

Answer

Jan Dragsbaek picture Jan Dragsbaek · Nov 28, 2011

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)

Related questions

Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More
How can I "disable" zoom on a mobile web page?

I am creating a mobile web page that is basically a big form with several text inputs. However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of …

Read More
Check box size change with CSS

How can I change check box sizes (globaly) without class and id? Is it possible to do this in a way different from: input[type=checkbox] { zoom: 1.5; }

Read More