Здесь можно найти всё что Вам нужно! ⇒

Почта techsupport@web-rubik.ru

Адаптировать сайт, адаптированная верстка сайта

Автор: © barik


Как адаптировать сайт под мобильные устройства, адаптированный дизайн сайта и адаптированный шаблон сайта. В последнее время эти вопросы интересуют каждого программиста, у кого уже есть свои сайты и надо идти в ногу со временем.

Для начала два примера css кода:


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style type="text/css">
        <!-- ==================== Пример 1 ==================== -->
        @media screen and (max-width: 1020px) {
            #sidebar1 {display:none;}
        }
        @media screen and (min-width:1020px) {
            #sidebar1_mobail {display:none;}
        }
        <!-- ==================== Пример 2 ==================== -->
        img {max-width:1000px;height: auto;}
        @media (max-width:1024px){
            img {width:800px;height: auto;}
        }
        @media (max-width:768px){
            img {width:600px;height: auto;}
        }
        @media (max-width:480px){
            img {width:100%;height: auto;}
        }
        @media (max-width:320px){
            img {width:100%;height: auto;}
        }
    </style>
</head>

На сегодняшний день 10-15% из 100 имеют адаптацию и, судя по статистике 30-40% трафика, приходится на мобильный трафик и эта цифра постоянно увеличивается. Практически каждый сейчас пользуется интернетом на смартфонах, планшетах.

Во-первых, чтобы сайт подстраивался под мобильные устройства, необходимо вставить между полями <head> </head> вот это:

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

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

Пример 1


Вместо одного блока, у вас два. В зависимости с чего вы зашли на сайт, в коде CSS один спрятан.

Если размер экрана больше 1020px мобильные стили #sidebar1_mobail не будут отображаться, если меньше 1020px будут прятаться основные #sidebar1 , а мобильные отображаться.

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

Пример 2


Если ширина экрана будет меньше чем 1024рх, то сработает данный запрос, и изображение будет адаптироваться к экрану. Основные медиа-запросы (1024 — ноутбуки, планшеты, 768 — планшеты, ipad, некоторые смартфоны, 480 — смартфоны, телефоны, 320 — телефоны, 240 — телефоны с маленьким разрешением).
Если есть сайдбар справа или слева от контента, то тут методом вычисления задаем размеры также в процентах. Например, общая ширина родительского блока 900рх, ширина блока с контентом 580рх, а сайдбара 300рх, то считаем по формуле:

580/900*100 = 64% - для контента
300/900*100 = 33% - для сайдбара

Если сайдбар имеет отступ, например, от левого края родительского блока - margin-left: 590px; , то расстояние также считайте по формуле и ставьте в процентах. Таким образом, контент и сайдбар будут адаптироваться под размеры экрана.
На маленьких экранах сайдбар будет плохо выглядеть, для этого его нужно переместить под контент, а контент растянуть на всю ширину экрана.

Два варианта полностью работоспособны.
Вот и всё! Теперь вы знаете как адаптировать сайт под мобильные устройства, какой способ вам больше подходит, выбирайте сами.

На этом у меня всё, надеюсь Вы узнали что-то новое и нужное! Если будут вопросы - пишите в комментариях...



Комментариев нет или


Оставить комментарий

Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru



←−−−