Блог

Главная - Вопросы по программированию - Правильные контейнеры правил CSS для экранов 4k

Правильные контейнеры правил CSS для экранов 4k

#html #css

Вопрос:

Мне нужна поддержка, чтобы знать правильный или лучший способ обработки контейнера для экранов 4k или начать с точки останова 1536 пикселей. То, что я хочу, — это фиксированная ширина

изображение

способ, который я применяю для достижения этой цели, заключается в следующем: Разметка:

 body {
      margin: 0;
    }

    .global-bg {
      height: 800px;
      padding: 0 2rem;
      background-color: cadetblue;
    }

    .content-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      margin: 0;
      max-width: 1440px;
      align-items: center;
    }

    .content {
      color: white;
    }

    @media screen and (min-width: 1024px) {
      .global-bg {
        padding: 0 4rem;
      }
    }

    @media screen and (min-width: 1536px) {
      .content-wrapper {
        margin: 0 auto;
      }
    } 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>Document</title>
</head>
<body>
  <div class="global-bg">
    <div class="content-wrapper">
      <p class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam beatae non voluptas, sequi nisi consequatur eius ut provident quam dolorem eligendi mollitia obcaecati sit et commodi asperiores aliquid voluptatum. Similique. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa hic eligendi obcaecati eveniet repellendus provident fugiat itaque deserunt aliquam accusantium quidem, voluptatibus consequatur consequuntur adipisci atque animi totam? Modi, esse? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat excepturi tenetur, numquam expedita dolores natus optio voluptatem odit, velit cumque fugit tempore amet vero incidunt deserunt nobis illum. Aperiam, reiciendis.
      </p>
    </div>
  </div>
</body>
</html>

Здесь я оставил ручку с кодом, чтобы вы могли более четко видеть реализацию

Поэтому, если кто-нибудь знает правильный или лучший способ сделать это, я буду следить за этим постом.

Комментарии:

1. Привет! У вас есть «максимальная ширина: 1440 пикселей», поэтому независимо от большого разрешения 1440 пикселей-это максимальная ширина контейнера. Так в чем же проблема? В соответствии с рекомендациями вам необходимо иметь не более 60-80 символов в строке, чтобы текст был читабельным. Если вы собираетесь заполнить этот контейнер только текстом, вы можете использовать, например, столбцы.

Метки: