1

In this setup

<div class="a">

</div>

.a {
   width: 400px;
   height: 600px;
}

  1. if the screen resolution is 1600*1200, will the div's width be 25% of the screen in the browser ?

  2. if the screen resolution is 4000*2400, will the div's width be 10% of the screen in the browser ?

I want to be always 25%.

If I use percent to set the width, div will shrink automatically when browser is not in full screen.

Vega
  • 27,856
  • 27
  • 95
  • 103
TTT
  • 53
  • 7

2 Answers2

0

Try this out use % instead of px. % are more responsive and will adjust to any screen resolution

.a{
  width: 40%;
  height: 60%; 
}

Vega
  • 27,856
  • 27
  • 95
  • 103
Iszzytone
  • 1
  • 2
0

Instead of px or % , the best practice is to Use the following units to make your div or any elements responsive on the basis of screen size as they target the "viewport" . Viewport Width (vw) Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. Viewport Width (vw) — This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width. for example width: 40vw; height: 60vh;

This will fix your problem. You can use this unit while defining size of your fonts as well.

Faiza Iqbal
  • 24
  • 4
  • This may help you ! https://stackoverflow.com/questions/29551606/why-does-vw-include-the-scrollbar-as-part-of-the-viewport – Faiza Iqbal Feb 16 '20 at 11:26