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

Javascript html
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.

Previous: Vue route jump failed, url has changed, but the page can only jump once, click again only url change, the page no longer change?

Next: What is the principle of compiling sass and less into css?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu