I make a page for different devices for the first time. It is necessary to make that if the width of the monitor is large enough (the monitor is more than 17 inches as a computer), then we give the following page:

#Menu{ width: 100%; padding: 0px; margin: 1px; background: #aaffff; } #Content{ width: 65%; padding: 0px; margin: 1px 1px 1px 5%; background: #ffaaff; float: left; } #AddContent{ width: 25%; padding: 0px; margin: 1px; background: #ffffaa; float: left; } 
 <!DOCTYPE html> <html> <head> </head> <body> <div id="Menu"> Меню </div> <div id="Content"> Контент </div> <div id="AddContent"> Дополнитеьный блок </div> </body> </html>

If the page on the tablet (more than 8 inches), then we issue the following page:

 #Menu{ width: 100%; padding: 0px; margin: 1px; background: #aaffff; } #Content{ width: 90%; padding: 0px; margin: 1px 1px 1px 5%; background: #ffaaff; } #AddContent{ width: 90%; padding: 0px; margin: 1px 1px 1px 5%; background: #ffffaa; float: left; } 
 <!DOCTYPE html> <html> <head> </head> <body> <div id="Menu"> Меню </div> <div id="Content"> Контент </div> <div id="AddContent"> Дополнитеьный блок </div> </body> </html>

If the page on the smartphone (less than 8 inches), then we issue the following page:

 #Menu{ width: 20px; padding: 0px; margin: 1px 1px 1px 5%; background: #aaffff; float: left; } #Content{ width: 90%; padding: 0px; margin: 1px 1px 1px 5%; background: #ffaaff; } #AddContent{ width: 90%; padding: 0px; margin: 1px 1px 1px 5%; background: #ffffaa; float: left; } 
 <!DOCTYPE html> <html> <head> </head> <body> <div id="Menu"> М. </div> <div id="Content"> Контент </div> <div id="AddContent"> Дополнитеьный блок </div> </body> </html>

And the role played by the width of the page (if the tablet is rotated to landscape orientation, the behavior should be like on a smartphone). And do not need the pixels, because smartphones can have a resolution of 1024x768, as well as computers.

What are the options to get this behavior (the font should also be selected)?

3 answers 3

Everything works the way you described it.

  1. You can download almost any css framework - it already has a built-in grid (grid system) that adapts to the width of the screen. Look, for example, twitter-bootstrap
  2. Add <meta name="viewport" content="width=device-width,initial-scale=1"/> to the <head> page.
  3. It can be really a smartphone and has a resolution of 1920x1080, but there is magic with the device pixel ratio . This value recalculates the resolution. Read, for example, this article and this question on enSO .
  4. Fonts browser scales automatically
  5. Media queries (media queries) in css. They built the grid, built-in frameworks. The developers simply chose boundary conditions and are not tied to a specific type of device (in the end, no one forbids you to reduce the browser window on the PC).

All this is called adaptive design / rubber marking / adaptive layout .

In Chrome, the developer’s tools have a useful button (top left) with a mobile phone image. It allows you to check the rubber markings and has presets for multiple phones / tablets.

Suppose I have twitter bootstrap, then an example of styles for your menu would look something like this:

 // УСЛОВНО на смартфоне (портрет) #Menu { width: 20px; padding: 0px; margin: 1px 1px 1px 5%; background: #aaffff; float: left; } // УСЛОВНО на планшете (портрет) @media(min-width: 768px) { #Menu { width: 100%; padding: 0px; margin: 1px; background: #aaffff; } } // УСЛОВНО на мониторе 19 дюймов @media(min-width: 992px) { #Menu { width: 100%; padding: 0px; margin: 1px; background: #aaffff; } }

Also, there is an approach called mobile-first . This means that styles are first created for a small screen size (conventionally a mobile phone), and then media requests add styles for larger screen sizes (for a tablet, then for a PC). You can do the opposite.

    you probably don’t understand something ... inches are the same pixels only in a different numbering system ... you can use media queries for different screens. And I advise you to look in the direction of Viewport

    • That is, document.documentElement.clientWidth will produce the actual screen sizes (only converted to certain units)? - Ilya
    • <meta name = "viewport" content = "width = device-width, initial-scale = 1" /> this is about the viewports ... but generally they write to the size of the browser window .. perhaps the user does not want the browser to full screen .. but let's say half the screen (then you will have scrollbars) .. it’s better not to tie it to the actual size. In media queries, they themselves determine which styles to load to a specific screen width. - Volodymyr
    • although purely for technical display of information, here is the article shublog.ru/ajax/jquery/... here it is shown how to find out the actual sizes on js..but it is doubtful how for me to load js..the simple html / css is enough - Volodymyr

    Apply @media queries to your styles. I apply only one (I think universal) query @media screen and (max-width: 45em) . Info W3 ++ Info2 W3 ++ Info Moz