#html #css #html5-canvas
Вопрос:
В настоящее время я учусь основам веб-дизайна. При создании веб-сайта, реагирующего на различные размеры экрана (телефон, планшет, компьютер,…), как я понимаю, вы бы использовали запросы CSS-мультимедиа. Тем не менее, на моем веб-сайте есть элемент canvas, и я на собственном горьком опыте (после довольно долгого размышления о том, почему он не работал) узнал, что для правильной работы вам нужно задать ширину и высоту не только в CSS, но и в HTML-атрибутах элемента. Итак, теперь мой вопрос: как лучше всего сделать элемент холста отзывчивым, то есть он меняет размер в зависимости от размера экрана, когда для его работы необходимо изменить обе эти вещи?
Ответ №1:
Вы можете просто «описать» свои атрибуты в CSS. например:
<div class="responsive"></div>
это ваш HTML, поэтому добавьте
.responsive{ ... width: 100%;}
для div, чтобы сделать его отзывчивым.
Добавление width: 100%; заставляет атрибуты изменять свою форму вместе с сайтом.
Комментарии:
1. Может быть, я неправильно сформулировал свой вопрос. У меня есть элемент canvas с атрибутами ширины и высоты (HTML) и свойствами ширины и высоты (CSS), установленными на
500px. Теперь я хочу, чтобы это значение было250px(HTML и CSS), если общий размер экрана меньше 500 пикселей. Чтобы изменить значения CSS, я могу сделать что-то вроде@media (max-width: 500px) { canvas { width: 250px; height: 250px } }этого . Что я хочу знать: как я также могу изменить атрибуты HTML, когда экран становится меньше?2. теоретически вы можете просто применить максимальную и минимальную ширину, чтобы сделать div отзывчивым. если это не то, что вы ищете, проверьте препроцессоры CSS, такие как SASS, чтобы сделать операторы if else. Проблема в том, что условия SASS оцениваются во время компиляции, а не во время выполнения. Другой способ-использовать 2 разных изображения( 1 меньше 250 пикселей и 1 больше 500 пикселей) и скрыть больший элемент с непрозрачностью: 0; когда страница становится меньше и показывает другой, снимите другой. Если этот комментарий был полезен, пожалуйста, закройте сообщение, если нет, просто опубликуйте еще один комментарий с проблемой здесь.