• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем слайдер Nivo Slider адаптивным в CSS (Адаптивность для iPhone и iPad на медиазапросов CSS3)
Делаем слайдер Nivo Slider адаптивным в CSS
Kosten
Дата: Воскресенье, 2019-03-17, 02:14 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Слайдер nivoSlider, так себе репрессивный слайдер, который в одно время просто стал расползаться, как пишет один пользователь, что нужна была адаптивность. Где он начал искать не так сильно сложное решение, главное, чтоб не было JavaScript. И здесь нашлось одно решение, которое полностью идет на чистых стилях, где даже не в курсе, как все называются, но вот главный плюс, это все корректно стало работать.

При разработке веб-сайта всегда полезно тестировать на как можно большем количестве различных платформ, устройств и браузеров. В наши дни превращение ваших сайтов в iPhone и iPad является важным шагом в процессе дизайна.

В частности, на iPad сайты выглядят примерно на 20% круче, чем в настольных браузерах, поэтому определенно стоит потратить время на точную настройку деталей. А при работе с iDevices часто необходимо предоставить какой-то собственный CSS, чтобы все было правильно.

Для iPad и других планшетов:

Код
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .nivoSlider {
    position:relative;
        max-width:745px; /* тут делаем новую ширину */
        max-height:100%;  
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}


Для iPhone и других смартфонов:

Код
@media only screen and (max-device-width: 480px) {
    .nivoSlider {
    position:relative;
        max-width:450px; /* тут делаем новую ширину */
        max-height:100%;  
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}


Еще можно таким же образом подключать разные файлы со стилями:

Код
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="iPad.css" />


Как можно понять из материала, что такой конфуз может возникнуть в любой момент, и не только с нивослайдером, а с чем угодно и это решение должно помочь.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем слайдер Nivo Slider адаптивным в CSS (Адаптивность для iPhone и iPad на медиазапросов CSS3)
  • Страница 1 из 1
  • 1
Поиск: