Что я могу сделать, чтобы мой код выглядел хорошо на 2 разных экранах - PullRequest
Новая
       0

Что я могу сделать, чтобы мой код выглядел хорошо на 2 разных экранах

0 голосов
/ 03 октября 2018 
<style>
* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {    
  width: 50%;
  left: 50%;
  margin: 5px auto;
  word-break: break-all;
  font-family: "Times New Roman", Times, serif;
  padding: 15px;
  border-radius: 15px;
  height: 15%;   
}    
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;    
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.floated {
  float:left;
  margin-right:5px;
}      
hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #333; /* old IE */
  background-color: #333; /* Modern Browsers */
}     
</style>

Это код CSS для столбцов, внутри этих столбцов у меня отображаются некоторые значки и текст, он может выглядеть идеально на моем экране, но на экране ноутбука выглядит испорченным, что я могу сделать, чтобы он выглядел хорошона каждом экране?Я использую% вместо px, поэтому он должен устанавливать высоту в зависимости от размера экрана?

HTML-код для столбца ниже; 

<div class="row">
  <div class="column" style="background-color:#edeeef;">
<body>
<p style="float:left; margin: 0 auto; cursor:pointer; border-radius: 50%;" onclick="location='http://localhost/badges.php?wear=<?php echo $b_id; ?>'"><?php echo $userbadge; ?></p>
<p style="float:left; margin: 15px 20px; font-size:19px; cursor:pointer; color:black" align="center"><?php echo $badgedesc; ?></p><p></p>
</body>
      </div>

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Вы можете использовать медиа-запросы

Медиа-запросы - это популярный метод доставки настраиваемой таблицы стилей на разные устройства. 

    // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

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

Система сетки начальной загрузки использует серию контейнеров, строк и столбцов для компоновки ивыровнять контент.Это построено с flexbox и полностью отзывчиво. 

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
0 голосов
/ 03 октября 2018

Используйте экран @media и (min-width: 1000px) {} с любыми размерами, которые вам больше подходят, поместите альтернативные css в скобки этого запроса, чтобы задать стиль для размеров экрана, соответствующих объявлению.

например, любой стиль, введенный в этом запросе, будет применяться только к экрану шире, когда 1000px используют инструменты разработчика, чтобы увидеть, на какой ширине вы хотите настроить стиль.

edit: Вы также можете изменить правило на 'max-width', если это поможет, попробуйте исследовать медиазапросы css3, чтобы полностью развить ваше собственное понимание

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...