Browser size screen adaptation method, browser size adaptation

Browser size screen adaptation method, browser size adaptation

To create a download page for our client products. The designer gave the screen and small screen cut, so the question is, how to display different pictures according to the screen size? I have never done this before. A colleague suggested using js to get the browser size and dynamically Replace the image. The method is feasible, but it is very troublesome. The product manager needs to achieve the same effect as the QQ download page. Why don't you study the QQ download page?

Open the QQ download page on your laptop and desktop, review the elements, use the big picture on the big screen, and use the small picture on the small screen. They reference different css files. The css file header referenced by the small screen has the following code:

@ Media screen and (max-height: 800px)

Baidu's function of this Code is multimedia query. You can set different styles for different screen sizes. This is a shortcut to solve the problem of screen size.