The problem of PC adapting to different resolutions

the designer gave a 1920X1080 design draft that needs to be adapted to different resolutions of the screen. I don"t know how to do this. I looked it up on the Internet and said to use scaling transform and zoom, but I didn"t see the simple example code. Basically, I said
this is how to be compatible with different browsers, and that is, the width of the elements in it is to try whether to use a percentage or how to do it. Uh, there is also the question of the centralization of content. I am still a vue single-page application. This is the only page that needs to be adapted to different screens

May.22,2021

the general practice is to define a middle width, 1200px or 1000px, depending on your design draft. The size in the middle width is directly based on the size of the design draft at 1:1. The width on both sides is adaptive and the middle width is in the middle.


responsive layout check out that many css frameworks provide responsive layout capabilities (grid systems).

of course, you can also implement it yourself, mainly using media queries, using different css styles at different resolutions.

body{
    background:red;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

if the document width is less than or equal to 300, the background color is light blue, and if the document width is greater than 300, the background style is red.


or use the layout layout of ele.me, https://element.faas.ele.me/-sharp.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b221a2-2b5d2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b221a2-2b5d2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?