как заставить html div реагировать на разрешение экрана - PullRequest
Новая
       9

как заставить html div реагировать на разрешение экрана

0 голосов
/ 24 марта 2020

Все, новичок в веб-разработке, я пытаюсь создать страницу входа. Работает корректно для 1400 * 765, но как заставить реагировать на весь экран. Пожалуйста, помогите мне в этом .. Извините за базовый c вопрос здесь снова.

У меня есть три изображения login.png, bck.png и icon.png. Таким образом, bck.png - это фоновое изображение, login.png - это окно, а icon.png - это значок, который вместе с login.png. 

.login-wrapper {
  top: 154px;
  left: 528px;
  width: 385px;
  height: 509px;
  background: url('../../assets/login.png') 0% 0% no-repeat padding-box;
  position: relative;
  opacity: 1;
}

.background {
  width: 100%;
  height: 100%;
  background: url('../../assets/bck.png') 0% 0% no-repeat padding-box;
  background-size: 100% 100%;
  color: white;
  top: -0.000244140625px;
  left: 0.0009765625px;
  position: fixed;
}

.icon {
  background: url('../../assets/icon.png') 0% 0% no-repeat padding-box;
  opacity: 1;
  top: 90px;
  left: 656px;
  width: 128px;
  height: 128px;
  position: fixed;
}

.example-full-width {
  top: 328px;
  left: 568px;
  width: 304px;
  height: 52px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #979797;
  border-radius: 4px;
  opacity: 1;
  position: fixed;
}

.example-full-width1 {
  top: 409px;
  left: 568px;
  width: 304px;
  height: 52px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #979797;
  border-radius: 4px;
  opacity: 1;
  position: fixed;
}

.btn-block {
  top: 516px;
  left: 569px;
  width: 304px;
  height: 60px;
  background: transparent linear-gradient(180deg, #FF80A9 0%, #C93C6A 100%) 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  position: fixed;
}

.h1 {
  top: 228px;
  left: 652px;
  width: 139px;
  height: 34px;
  text-align: left;
  font: Heavy 25px/34px Avenir;
  letter-spacing: 8.05px;
  color: #000000;
  opacity: 1;
  position: fixed;
}

.h2 {
  top: 264px;
  left: 670px;
  width: 104px;
  height: 25px;
  text-align: left;
  font: Black 18px/25px Avenir;
  letter-spacing: 2.63px;
  color: #000000;
  opacity: 0.5;
  position: fixed;
}
<div class="background"></div>
<div class='icon'></div>
<div class="login-wrapper">

  <div class="box">
    <mat-card-header>
      <h1 class='h1'>CONFIG</h1>
      <h2 class="h2">SERVICES</h2>
    </mat-card-header>

    <form class="example-form">
      <mat-card-content>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email">
        </mat-form-field>

        <mat-form-field class="example-full-width1">
          <input matInput placeholder="Password">
        </mat-form-field>
      </mat-card-content>
      <button mat-stroked-button color=#C93C6A class="btn-block">Log in</button>
    </form>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 24 марта 2020

Существует множество способов сделать сайт более отзывчивым.

Возможно, вы захотите прочитать в CSS медиазапросы . Они позволяют вам определять правила стиля, применимые только для определенного размера экрана.

Примерно так: 

/* normal styling (e.g. mobile) */
@media screen and (min-width: 992px) {
  /* extra styling for desktop */
}
0 голосов
/ 24 марта 2020

Вы можете использовать CSS медиазапросы, чтобы ваш сайт реагировал на все экраны

Например:

@media (max-width: 1600px) { // your CSS codes }

...