Медиа-запросы - сделать изображения отзывчивыми

#html #css #responsive-design #media-queries

#HTML #css #отзывчивый дизайн #медиа-запросы

Вопрос:

На моей странице много изображений, и все они связаны строками, что-то вроде этого:

 $    $
   /
   $      ( Assuming $ is an image )
 /  
$    $

Когда я просматриваю эту страницу на своем телефоне, все изображения и строки разбросаны.Теперь, используя медиа-запросы, как я могу уменьшить изображения, чтобы они соответствовали экрану моего телефона, и ПРИ этом изображения не меняли своего положения. Я только хочу изменить их размер.

Спасибо!

Ответ №1:

Использование медиа-запроса действительно просто, просто используйте @media и диапазон устройств, который вы хотите. А затем внутри него запишите css, который вы хотите применить для этого диапазона.

 img {
   width: 500px; // current width
   height: 500px; // current height
}

@media (max-width:767px){
 img {
   width: 200px; // new width for screen <768px
   height: 200px; // new height for screen <768px
 }
}

Также убедитесь, что вы добавили следующий код в начало вашей HTML-разметки.

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

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

Другие правила медиа-запросов:

 @media (min-width:768px and max-width:1199px){
   // code for device screen between 768 and 1200px
}

@media (min-width:1199px){
   // code for device screen larger than 1199px
}

1. Спасибо, Киран 🙂 .. Один вопрос, куда мне поместить @media code?..in заголовок или тело?

2. Вместо того, чтобы добавлять его непосредственно в ваш html-файл. Добавьте его в таблицу стилей. Если style.css — это файл, в который вы записали весь свой css, добавьте его туда. Или вы можете добавить другой файл с именем, скажем, reponsive.css, и добавить его туда. Пожалуйста, прочитайте здесь о том, как добавить стиль к вашему документу: w3schools.com/css/css_howto.asp

Ответ №2:

Да, использование медиа-запросов — это просто, например :

@media (минимальная ширина: 100 пикселей) и (максимальная ширина: 1024 пикселей)

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

Во-вторых, не используйте высоту и ширину в пикселях, а не используйте в%, тогда изображение также будет уменьшаться в зависимости от области просмотра

попробуйте и вернитесь