The width of the layout is 1300px. I still understand how to make it under 1300, but I don’t know how to make it adaptive for any size up to 320px ...

enter image description here

Closed due to the fact that the essence of the question is not clear to the participants of HamSter , lexxl , iluxa1810 , Denis , aleksandr barakin 16 Nov '16 at 12:17 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • four
    isotope.metafizzy.co , masonry.desandro.com - HamSter
  • This question-picture should be closed, because it is useless for the knowledge base: ideas expressed by pictures, search engines (for the time being) do not know how to index. - aleksandr barakin
  • @alexander barakin how to close the question? "Delete" button? It is written that "We do not recommend deleting the questions answered." - Alexander
  • @ Alexander, is already closed. 22 hours ago. this is written immediately below the question text. - aleksandr barakin

1 answer 1

Specify relative sizes in styles, for example, in% or sizes = "00vw". You can also use the art direction technique, for example:

<picture> <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> </picture>

Create breakpoints for responsive images, for example:

 <img src="400.png" sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw" srcset="100.png 100w, 200.png 200w, 400.png 400w, 800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Google Documentation