How to write different HTML for different screen sizes

Question

I understood how I change CSS through media queries (e.g. media = "screen and (max-width: 640px)")

but let's say I want to write (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 condition do I need to write so that everything is correct?

Answer 1

As I understand it, you cannot make media queries inside HTML pages. You must do this from your CSS.

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

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

Answer 2

you can check it with javascript display object:

 screen.width 

or you can do it with css

 <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" /> 

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml

Answer 3

You need to assign an id (or a class or any other way to search for your element from CSS) in the <div> , and then you can set the definition of the media request as follows:

 <div id="mydiv">...</div> <style type="text/css"> @media screen and (min-width: 961px) { div#mydiv { display: none } } </style> 

Or for better readability: make it hidden by default and visible if max-width: 960px .

Answer 4

I could be wrong, but I think that choosing css for resolution will require a little help from javascript.

Here is a brief example of what js built into jquery might look like:

 $(document).ready(function() { if ((screen.width>=1024) && (screen.height>=768)) { alert('Screen size: 1024x768 or larger'); $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"}); } else { alert('Screen size: less than 1024x768, 800x600 maybe?'); $("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"}); } }); 

Hope this helps.

Answer 5

You can add jQuery function to dynamically change style according to scree resolution.

 if(screen.width==1600) { jQuery('#hb-gotop').removeAttr("margin-left", "-0.9"); jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%'); } else if(screen.width==1280) { jQuery('#hb-gotop').removeAttr("margin-left", "-0.9"); jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%'); } else if(screen.width==1024) { jQuery('#hb-gotop').removeAttr("margin-left","-0.9"); jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%'); } else if(screen.width==800) { jQuery('#hb-gotop').removeAttr("margin-left","-0.9"); jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%'); } 

Answer 6

Answere was helpful:

if screen resolution is less than x append css

You can do this completely with CSS 3 with the @media command.

 **@media (max-width:960px) { css... } //nothing with screen size bigger than 960px 

@media (min-width: 960px) {css ...} // nothing with a screen size less than 960px **

Jason Witt makes a good point, it is only CSS 3, so it will not work with older browsers (although it should work with all modern browsers). You can also edit the screen or device.

@media screen {.nomobile {display: block; }} // desktops / laptops

@media handheld {.nomobile {display: none; }} // mobile devices Or you can assume that mobile devices will have a smaller width, and continue with this.