Блог

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

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

#javascript #html #jquery #css #sass

Вопрос:

У меня есть следующий код:

 .blockquote1 {
  padding: 60px 80px 40px;
  width: 1090px;
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}

blockquote2 cite {
color: #999999;
position: relative;
font-size: 14px;
left: 845px;
bottom: 60px;
margin-top: 5px;
}
 
blockquote2 cite:before {
content: "2014 2009";
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}

blockquote:before {
display: block;
padding-left: 10px;
content: "201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
} 
 <blockquote class="blockquote1">
  <h7>Move in silence, only speak when it’s time to say checkmate.</h7>
</blockquote>
<br />
<blockquote2>
  <cite>Kr. Pankaj Yadav</cite>
</blockquote2>

Таким образом, фактический текст реагирует так, как будто он меняет ширину при изменении ширины устройства. Однако bockquote2 cite он не реагирует и не меняет свое положение/ширину при меньших размерах экрана. Как бы я сделал так, чтобы он отображался как большой текст на небольших устройствах?

Ожидаемые результаты

введите описание изображения здесь

Это должен быть ожидаемый результат, есть какие-нибудь предложения о том, как это сделать возможным?

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

1. почему вы используете элемент blockqute2, созданный вместо класса, подобного первому ?

2. Хорошо. У вас есть все это 🙂 пользовательские элементы, такие как blockquote2 (?), вес шрифта в пикселях (?), расположение без единиц измерения ` top: 100;` (?), вы используете класс, а затем тег для одного и того же элемента ? это очень сбивает с толку. тогда у вас есть left: 845px; элемент cite. Конечно, он не будет реагировать. Взгляните на «адаптивный дизайн» и посмотрите, какие у вас есть решения.

3. Блок-цитаты реагируют до тех пор, пока вы не скажете им этого не делать. Если вы хотите адаптивный макет, откажитесь от привычки устанавливать фиксированные размеры пикселей и использовать положение:абсолютное.

4. blockquote2 является недопустимым HTML, если у вас нет кода, добавляющего его в CustomElementRegistry .

5. Что бы вы ни делали, не приписывайте этому человеку повторное предложение. :0

Ответ №1:

Вопрос в том, как разместить цитату в нужном месте — обоснованную справа под цитатой. Он не хочет, чтобы все это было отзывчивым (в смысле изменения размеров текста и т. Д., Чтобы цитата вписывалась в строку так же, как на более широком устройстве).

Мое предложение состояло бы в том, чтобы использовать HTML-блок-цитату и связанный с ней элемент cite вместе по назначению (см. MDN). То есть цитата является дочерним элементом (основной) блок-цитаты. Это также облегчит доступность.

Итак, в качестве первого «быстрого исправления» этот фрагмент изменяет HTML, чтобы удалить вторую блок-цитату, поскольку семантически второй цитаты нет, и выравнивает текст цитаты по правому краю. Это также изменяет настройку ширины блок-цитаты, поскольку заданные настройки могут привести к переполнению цитаты вправо на более узких экранах просмотра. Он сохраняет максимальную ширину цитаты равной 1090 пикселей, хотя, как и в коде вопроса.

 .blockquote1  {
  box-sizing: border-box;
  padding: 60px 80px 40px;
  max-width: 1090px;
  width: 100%;
  /* make sure it can fit into its container */
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}
blockquote2 {
  rtext-align: right;
  background-color: cyan;
}
.blockquote1 cite {
  color: #999999;
  position: relative;
  font-size: 14px;
  margin-top: 5px;
  text-align: right; /* added */
  width: 100%;
  display: inline-block;
}

.blockquote1 cite:before {
  content: "2014 2009";
}

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  max-width: 100%;
  margin: 0.25em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  color: #383838;
}
/* removed as it would cause overflow on narrower devices
@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}
*/
blockquote:before {
  display: block;
  padding-left: 10px;
  content: "201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote cite:before {
  content: "2014 2009";
} 
 <blockquote class="blockquote1">
  <h7>Move in silence, only speak when it’s time to say checkmate.</h7>
  <br>
  <cite>Kr. Pankaj Yadav</cite>
</blockquote>

Ответ №2:

Вы должны использовать%, а не пиксели, если хотите, чтобы он изменялся вместе с экраном, если это то, что вы хотите. Просто измените положение сверху, снизу, слева и справа от пикселей(пикселей) на проценты(%). Это должно сработать.

Изменить: вы также меняете шрифт с пикселей на %

 .blockquote1 {
  padding: 60px 80px 40px;
  width: 1090px;
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}

blockquote2 cite {
color: #999999;
position: relative;
font-size: 10%;
left: 845px;
bottom: 60px;
margin-top: 5px;
}
 
blockquote2 cite:before {
content: "2014 2009";
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}

blockquote:before {
display: block;
padding-left: 10px;
content: "201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

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

1. Вы должны скопировать фрагмент и внести описанные изменения, чтобы продемонстрировать свое решение.

2. Ну, вы должны использовать любую относительную единицу измерения, из которой процент равен единице. Вы можете использовать em rem , vw , vh , и т.д., Как указано в MDN .

Ответ №3:

  1. Неправильные HTML-теги

blockquote2 и h7 не являются правильными HTML-тегами. теги заголовка заканчиваются, h6 и вы можете использовать только blockquote их .

  1. Вы Можете Использовать Медиа-Запросы

Как вы выбрали blockquote в следующем коде, вы также можете изменить другие.

 @media (max-width: 800px) {
  blockquote {
    width: 800px;
  }
  .blockquote2 {
    font-size: 35px;
  }
}
  1. Неправильный Размер, Используемый Для Шрифтов

Вы можете только использовать % px em rem vw ... . просто не используйте ширину.

Метки: