Hello, maybe I did not correctly express the question, the fact is that there is a site on which the design elements should not go beyond the size of the browser ( http: //vasilyiypupkin.rf/nive which is not an advertisement). I have been suffering for a long time, how to make the site look normal on all monitors. Now on large screens (15-17-21 inches) it looks fine and on small screens (ipad, netbook) the fonts are not readable, because the font sizes are set to% of the browser size, so that everything is proportional, and at the end this result sad. In general, the question of how to impose such designs, so that in all screens was normal. This time all the sizes of the site elements (fonts, pictures) depends on the size of the browser (autoresize), give tips, materials, etc. For earlier thanks to everyone.

ps I read articles about rubber sites, but there are not such designs, and they did not really help me

    2 answers 2

    Use Media Queries and for ipad / netbook prescribe font size more (and maybe even strictly in pixels).

      1) Decide how the site will look on all screens. If you are not able to do this mentally, use special plugins with a ruler or a bounding DIV, which will have a scroll overflow.
      1.1) If on the smallest everything fits, then you can not read further. 1.2) If not all breaks - select the most significant elements. Hide the rest with @media or javascript (worse)
      1.3) Rubber and floatiness here will help you out a lot, but turning off text styles, especially fonts, will help you even more: there will be no file on any iPhone that did not take the custom font properly.
      1.4) When the site is in a normal state, return the maximum width back (do not forget about the retina. And about the approaching QFHD)