Automatically adapt to div containers in Javascript
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
474

I have a div with different sizes. It can have the following dimensions: Height: 780, Width: 1390, or Height: 524, Width: 930.

React applications are displayed on two types of screens: Full HD 1920x1080 and 4K 3840x2054.

I want the div to be different sizes and screens so that it always has the same proportions in the screen and the same dimensions in both types of screens.

For example, I want the div to be different on other types of screens, such as tablets, smartphones, or 1920x1200 screens. I want to make it as flexible as possible.

In 4K the div looks much smaller than the rest of the screen, while in Full HD it takes up most of the screen.

I tried using vh and vw as follows:

function convertPxToVH(px) { var vh = (px / 1080) * 100; return vh; } function convertPxToVW(px) { var vw = (px / 1920) * 100; return vw; }

This way I will get the same vh and vw for each type of screen. But it doesn't work well because in 4k screen the div has more space in full HD.

This is the result I want to achieve (obviously I want it to fit other types of screens as well). Thanks in advance to everyone who helps me

P粉806834059
P粉806834059

reply all (1)
P粉366946380

You can achieve this by using css withwidthandheightandvwandvh.

vwrepresents a percentage of the viewport width, so80vwis 80% of the width. This is the same asvh, just at a different height.

body { background-color: #00305e; } .keep-prop { background-color: #ffc700; width: 80vw; height: 80vh; margin: 0 auto; }
   
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!