Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы дисплей соответствовал?

Как мне сделать так, чтобы дисплей соответствовал?

#css #reactjs #display

Вопрос:

https://i.stack.imgur.com/rDst8.jpg

Как мне это исправить? Я хочу, чтобы все было так https://i.stack.imgur.com/m2Jfh.jpg

Первое изображение-это мой веб-сайт, когда я использую обычный режим / режим телефона

Второе изображение-это мой веб-сайт, когда я использую режим рабочего стола в своем телефоне

 My css:
text-align: center;
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-size: calc(10px   2vmin);
      color: white;

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

1. Вопрос неясен, пожалуйста, добавьте какой-нибудь код. Трудно понять вашу проблему, не видя кода

2. вставьте также свой HTML

Ответ №1:

Чтобы сделать его более похожим на первое изображение, вам нужно указать окно просмотра (если вы еще этого не сделали) </head> с помощью этого кода:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Если вы перезагрузитесь, вы, вероятно, увидите, что он выглядит намного лучше.

Затем вы также должны указать максимальную ширину в своем CSS:

 max-width: 90%;

Вы также должны добавить поля по бокам:

 margin-left: 5%;
margin-right: 5%;

Ответ №2:

Вы можете использовать flex: wrap; , чтобы исправить это, и это можно сделать многими способами. вы можете изучить свойства гибкого трубопровода и сетки здесь, https://developer.mozilla.org/en-US/docs/Web/CSS

Метки: ,