How to Scale Window According To Device Size

user_19670872 0
Viewed 37

I am using 98.css in my website and I want to scale a window

<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text"></div>
    <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Maximize"></button>
        <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body"></div>
</div>

according to the device's size. How do I do it?

css html
2 Answers

You need to use viewport width and height it will always take the full width of the viewport/device!

.scale-me-fully {
  width: 100vw;
  height: 100vh;
}
<div class="window" class="scale-me-fully">
  <div class="title-bar">
    <div class="title-bar-text"></div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body"></div>
</div>

user_59245620

From what I understand, you want to scale the width based on device size, so all you really need is a width: 100% instead of a fixed 300px width.

See the example below -

div.window {
  background: red; /* added just so you can see the width */
  width: 100%;
  margin: auto;
}
<div class="window">
  <div class="title-bar">
    <div class="title-bar-text"></div>
    <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Maximize"></button>
        <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body"></div>
</div>

user_87744250
Related