дополнение
Вы можете придать вашему шаблону еще более привлекательный вид для мобильного девайса, используя meta viewport.
Изучение CSS Разметки"Отзывчивый дизайн" является стратегией, делающей сайт адаптированным к размеру браузера любого устройства, на котором он показывается... эта стратегия позволяет выглядеть сайту здорово несмотря ни на что.
Media queries являются наиболее мощным инструментом для этого. Давайте возьмем нашу разметку, где мы исползовали проценты для задания ширины и покажем, что произойдет с колонкой, когда браузер станет слишком мал, чтобы поместить меню на боковой панели:
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media (max-width:599px) {
nav li {
display: inline;
}
}Теперь когда вы меняете размер вашего браузера это выглядит еще круче чем когда!
</section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>Тада! Теперь наш шаблон здорово смотрится даже в мобильных браузерах. Здесь вы увидите некоторые популярные сайты, испльзующие media queries таким образом. Существует целое множество различных свойств кроме min-width и max-width показаных в примере выше: проверте the MDN documentation чтобы узнать больше.
Вы можете придать вашему шаблону еще более привлекательный вид для мобильного девайса, используя meta viewport.