Блог

Главная - Вопросы по программированию - Как сделать карту во всю ширину, чтобы изображение отображалось даже при просмотре с мобильного устройства (usig tailwindcss)

Как сделать карту во всю ширину, чтобы изображение отображалось даже при просмотре с мобильного устройства (usig tailwindcss)

#html #css #tailwind-css

Вопрос:

Поэтому я пытался отображать сообщения на странице с помощью css-карт tailwind, в мобильном режиме я все еще хочу, чтобы карты были во всю ширину, а изображения сообщений отображались рядом, как и в режиме рабочего стола, пример кода выглядит следующим образом:

 <div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6"> <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="h-48 w-full object-cover md:h-full md:w-20" src="..."> </div> <div class="p-8"> <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>  <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a> <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div> </div>

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

1. Вам просто нужно удалить md: их из ваших классов, это говорит Попутному ветру применять эти стили только выше средней точки останова.

2. Спасибо за помощь, она хорошо сработала

Ответ №1:

Прежде всего, вам нужно использовать медиа-запрос, чтобы изменить настройки по умолчанию для вашей карты «Попутный ветер». создайте файл css и подключите его к своему html, или, если он у вас уже есть, вам нужно учитывать несколько моментов, касающихся размеров экрана.

  1. В каком диапазоне ширины представлены смартфоны/планшеты? вероятно, 768 пикселей-это максимальный общий размер планшета?
  2. каково имя класса карты в данном случае, «max-w-md», но я предпочитаю, чтобы вы использовали идентификатор для его выбора.

запишите этот код в свой css-файл

 @media(max-width: 768px) {  .max-w-md {  max-width: 100vw !important;  } }

давайте разберемся строка за строкой, что здесь происходит.

  1. мы устанавливаем максимальную ширину устройств в диапазоне 768 пикселей
  2. мы выбираем наш класс карты .max-w-md (мы пытаемся переопределить настройку css tailwind, в которой этот класс «max-w-md» имеет максимальную ширину 100 Вт(100 видовых экранов), означает, что ему будет все равно, какова родительская ширина или высота, исходя из размера видового экрана(часть, на которой вы видите веб-сайты, весь документ), в соответствии с этим он установит ширину, когда ширина экрана составит 768 пикселей, до того, что ваша карта будет составлять 100% страницы, на которой вы видите html.
  3. вы можете зайти в инструменты разработчика в браузере и перейти к элементам вкладки, а затем выберите главная карта, смотри на этот div , этот div является ваш класс, который вы хотите выделить, чтобы увидеть его в CSS и стили вкладки справа или снизу Кордер тип ширины или максимальной ширины на фильтре она будет давать этот код это попутный ветер в CSS по умолчанию для Max-ж-МД класса
Метки: ,