Использование адаптивного или адаптивного CSS в проектировании

Question

Я слышал от одного из моих друзей об адаптивном дизайне CSS, преимущество которого, по его словам, заключается в том, что нам не нужно создавать веб-сайт с другим разрешением, мы можем просто создать один CSS и это поможет, это звучит интересно для меня поэтому сегодня я ищу адаптивный дизайн в интернете, и наткнулся на статью, которая показала демо, но там говорится, что мы должны предоставить @media Для разрешения, которое мы хотим, чтобы наш веб-сайт поддерживал, я попробовал один из них на моей странице примера, я предоставил @media query for (max-width:980px) он отлично работает на моем мобильном телефоне, но не на моем ноутбуке.

Может кто-нибудь сказать мне, как я могу настроить мой @media query так что мой сингл будет работать во всех доступных разрешениях, потому что описанным выше способом я должен написать другую версию одного и того же css, чтобы он действовал в нескольких браузерах.

Answer 1

Лучший способ сделать адаптивный дизайн - это сначала проектировать смартфоны (сначала их называют мобильными). Затем, например, для планшетов (около 600 пикселей) выполните медиа-запрос для этого, а затем выполните медиа-запрос для рабочих столов (около 960 пикселей).

Вот чрезвычайно простой пример того, как использовать медиа-запросы для заголовка.

h1 {
font-size: 12px; /* This is basic, great for smartphones */
}

@media screen and (min-width: 600px) {
    h1 {
    font-size: 16px; /* A little bigger for tablets */
    }
}

@media screen and (min-width: 960px) {
    h1 {
    font-size: 21px; /* A little bigger for desktops */
    }
}

Тем не менее, это нечто большее, чем просто. Ваши проекты должны быть гибкими по своей природе, чтобы они могли адаптироваться к любому размеру экрана, используя медиа-запросы, чтобы выполнить этот переход при необходимости. Это помогает избежать создания медиазапроса для каждого размера устройства (и выглядит не очень красиво).

Для создания столбцов и тому подобного вы не создадите их изначально, но при большем размере экрана, скажем, (600px), вы бы переключили элементы блока на элементы встроенного блока. Я на самом деле предпочитаю плавающее, чем использование inline-block. Вот очень простой пример:

<div class="left">Content</div>
<div class="right">Sidebar</div>

.content, .sidebar {
    width: 100%; /* We don't want to have 2 columns on a small screen * /
}

@media screen and (min-width: 600px) {
    .content {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 80%; / *set the with on your content */
    }
    .sidebar {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 20%; /* set the width of the sidebar */
    }
}

Могут быть случаи, когда ненужный логотип отлично смотрится на настольных компьютерах, но он вам не нужен, и это нарушает макет на маленьких экранах. Вы решаете это с display: none, Вот очень простой пример:

. unnecessary-logo {
    display: none; /* We want to hide it on small screens */
}
@media screen and (min-width: 600px) {
    . unnecessary-logo {
    display: block; /* We want to show it on bigger screens */
    }
}

Существует гораздо больше адаптивного дизайна, но, надеюсь, я ответил на ваш вопрос, и этой информации достаточно, чтобы вы начали.

Посмотрите это видео: http://www.youtube.com/watch?v=-BVmrSG93XE