Добрый день форумчане. Есть cайт, который создан с помощью HTML и CSS, как правильно сделать для него мобильную версию? С ув.
Варианта 2:
1. Адаптивный дизайн.
2. Скрипт определяющий устройство и/или разрешение и переадресующий на вторую версию.
От себя добавлю, что в адаптивности есть свои плюсы и минусы:
++++++ Адаптивной верстки +++++++
Вам не нужно на каждую версию заливать и дублировать контент
При правильной разработке на 99% устройств будет отображаться идеально
Править дизайн не придется на 2 или 3 версиях сайта, если возникнет такая необходимость.
--------- Адаптивной верстки -----------
Нет возможности убирать лишнее с мобильной версии (тяжелые картинки, часть дизайна и т.д.)
Не всегда можно предугадать реальное отображение на всевозможных экранах просмотра
Для подгона под "Mobile-Friendly" иногда приходится идти в ущерб запланированного дизайна.
Вот как-то так...
Цитата: werd2077 от 16-04-2015, 23:12:23
Добрый день форумчане. Есть cайт, который создан с помощью HTML и CSS, как правильно сделать для него мобильную версию? С ув.
Могу сказать, что все ширины и высоты блоков нужно указывать в процентах.
Изображения и видео - тоже. Чтобы убедится самому просто добавьте эти строчки в ваш CSS:
1) В Head добавляете строчку:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2) В CSS:
img {max-width:100%;height: auto;} // все изображения станут резиновыми
embed, object, iframe {max-width: 100%;max-height: 500px;} // видео, а также видео с Ютуба и Вимео тоже.
Тоже в CSS:Основной блок (Враппер или врап, в котором весь контент).
@media screen (max-width: 1024px) { .wrapper {width: 100%;}} // к примеру, так нужно проделать со всеми основными блоками, то есть переделать их длину в проценты. Далее:
@media screen (max-width: 854px) { }
@media screen (max-width: 603px) { }
@media screen and (max-width:480px) { }
Добавлено: 17-04-2015, 10:33:40
Проверяется мобильная версия сайта путем уменьшения размера браузера.
Большое спасибо, вечером буду экспериментировать.
Добавлено: 17-04-2015, 20:05:09
Цитата: wassulmaier от 17-04-2015, 10:32:22
Могу сказать, что все ширины и высоты блоков нужно указывать в процентах.
Изображения и видео - тоже. Чтобы убедится самому просто добавьте эти строчки в ваш CSS:
1) В Head добавляете строчку:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2) В CSS:
img {max-width:100%;height: auto;} // все изображения станут резиновыми
embed, object, iframe {max-width: 100%;max-height: 500px;} // видео, а также видео с Ютуба и Вимео тоже.
Тоже в CSS:Основной блок (Враппер или врап, в котором весь контент).
@media screen (max-width: 1024px) { .wrapper {width: 100%;}} // к примеру, так нужно проделать со всеми основными блоками, то есть переделать их длину в проценты. Далее:
@media screen (max-width: 854px) { }
@media screen (max-width: 603px) { }
@media screen and (max-width:480px) { }
Добавлено: 17-04-2015, 10:33:40
Проверяется мобильная версия сайта путем уменьшения размера браузера.
Я так понял, это адаптивный дизайн?
Добавлено: 17-04-2015, 20:05:45
Я так понял, это адаптивный дизайн?
Адаптивный дизайн+Node.js+Python
Как вы догадываетесь есть решения выдающие обе версии по загрузке с того или иного устройства.
Для видео мне кажется лучше использовать такую конструкцию
<style>
.video {
width: 100%;
position: relative;
padding-top: 56.25%;
}
.video iframe, .video object, .video embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video">
<iframe src="https://www.youtube.com/embed/kWou4mzLTTQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
Вам нужна адаптивная верстка. Почитайте или посмотрите видео как это реализовать