↑↑↑

↓↓↓
Флаг России Флаг Великобритании
Баннер Недвижимость в Коста-дель-Соль
🏠 | 💻 PC | Web |

Адаптивный дизайн сайта

Отображение сайтов зависит от ширины экрана. Для того чтобы задать правила по которым контент будет передаваться браузеру существуе CSS правило media

flexbox

css grid

  • Главная
  • PC
  • Windows 7 на Debian: Virtualbox
  • Новичкам Debian
  • Ваша реклама
  • Linux
  • Как я ставил Дебиан
  • Как вставить флешку под Linux
  • Debian_FAQ
  • Ваша реклама
  • Debian_FAQ
  • Новичкам Debian
  • Ваша реклама
  • Windows 7 на Debian: Virtualbox
  • Вставляем флешку под Linux
  • CSS

    @media screen and (min-width: 1025px) /* Width */ { body { background: blue; } .small { /* на этом разрешении это меню не видно */ display: none; } .medium { /* на этом разрешении это меню не видно */ display: none; } .small_plus_medium { /* на этом разрешении это меню не видно */ display: none; } }

    @media screen and (max-width: 1024px) and (min-width: 800px) /* Medium */ { body { background: green; } .small { /* на этом разрешении это меню не видно */ display: none; } .wide { /* на этом разрешении это меню не видно */ display: none; } }

    @media screen and (max-width: 799px) /* Small */ { body { background: red; } .wide { /* на этом разрешении это меню не видно */ display: none; } .medium { /* на этом разрешении это меню не видно */ display: none; } .medium_plus_width { /* на этом разрешении это меню не видно */ display: none; } }

    Html

    <table>
    <tr>
    <td></td>
    <td></td>
    <td class="medium_plus_width"></td>
    <td class="wide"></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td class="medium_plus_width"></td>
    <td class="wide"></td>
    </tr>
    <tr>
    <td class="small_plus_medium"></td>
    <td class="small_plus_medium"></td>
    <td class="medium"></td>
    </tr>
    <tr class="small">
    <td></td>
    <td></td>
    </tr>
    </table>


    Адаптивный дизайн. Пример.

    Пример адаптивного меню на 15 элементов. Чтобы посмотреть как он работает нужно изменить размер экрана.

    Целью было бы сделать так, чтобы на широких экранах было три строки по пять элементов, при более низкой ширине четыре строки по четыре (один элемент пустой), затем при сужении экрана пять строк по три элемента и 8 строк по два элемента (один пустой) для самых маленьких экранах.
  • ITEM 01
  • ITEM 02
  • ITEM 03
  • ITEM 04
  • ITEM 05
  • ITEM 06
  • ITEM 07
  • ITEM 08
  • ITEM 09
  • ITEM 10
  • ITEM 11
  • ITEM 12
  • ITEM 13
  • ITEM 14
  • ITEM 15
  • ITEM 15
  • ITEM 10
  • ITEM 05
  • ITEM 04
  • ITEM 09
  • ITEM 14
  • ITEM 03
  • ITEM 08
  • ITEM 13
  • ITEM 05
  • ITEM 14


  • Код

    <div class="pc_menu">
    <!-- <table width="100%" cellspacing="0" cellpadding="4" bordercolor="green" border="3" > -->
    <table width="100%">
    <tr>
    <td><li><a href = "#" title="ITEM 01">ITEM 01</a></li></td>
    <td><li><a href = "#" title="">ITEM 02</a></li></td>
    <td class="width_bcd"><li><a href = "#" title="">ITEM 03</a></li></td>
    <td class="width_cd"><li><a href = "#" title="">ITEM 04</a></li></td>
    <td class="width_d"><li><a href = "#" title="">ITEM 05</a></li></td>
    </tr>
    <tr>
    <td><li><a href = "#" title="">ITEM 06</a></li></td>
    <td><li><a href = "#" title="">ITEM 07</a></li></td>
    <td class="width_bcd"><li><a href = "#" title="">ITEM 08</a></li></td>
    <td class="width_cd"><li><a href = "#" title="">ITEM 09</a></li></td>
    <td class="width_d"><li><a href = "#" title="">ITEM 10</a></li></td>
    </tr>
    <tr>
    <td><li> <a href = "" title="">ITEM 11</a> </li></td>
    <td><li><a href = "#" title="">ITEM 12</a></li></td>
    <td class="width_bcd"><li><a href = "#" title="">ITEM 13</a></li></td>
    <td class="width_cd"><li><a href = "#" title="">ITEM 14</a></li></td>
    <td class="width_d"><li><a href = "#" title="">ITEM 15</a></li></td>
    </tr>
    <tr>
    <td class="width_abc"><li><a href = "#" title="">ITEM 15</a></li></td>
    <td class="width_abc"><li><a href = "#" title="">ITEM 10</a></li></td>
    <td class="width_bc"><li><a href = "#" title="">ITEM 05</a></li></td>
    <td class="width_c"><li><a href = "#" title=""></a></li></td>
    </tr>
    <tr>
    <td class="width_ab"><li><a href = "#" title="">ITEM 04</a></li></td>
    <td class="width_ab"><li><a href = "#" title="">ITEM 09</a></li></td>
    <td class="width_b"><li><a href = "#" title="">ITEM 14</a></li></td>
    </tr>
    <tr class="width_a">
    <td><li><a href = "#" title="table">ITEM 03</a></li></td>
    <td><li><a href = "#" title="">ITEM 08</a></li></td>
    </tr>
    <tr class="width_a">
    <td><li><a href = "#" title="">ITEM 13</a></li></td>
    <td><li><a href = "#" title="">ITEM 05</a></li></td>
    </tr>
    <tr class="width_a">
    <td width="50%"><li><a href = "#" title="">ITEM 14</a></li></td>
    <td width="50%"><li><a href = "#" title=""></a></li></td>
    </tr>
    </table>
    </div>


    Вы нашли то, что искали на сайте?

    ДА НЕТ

    Или оцените по десятибальной шкале

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

    Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

    Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

    Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.

    Сделаем поиск лучше!
    Контакты и сотрудничество:
    Рекомендую наш хостинг beget.ru
    Пишите на info@urn.su если Вы:
    1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
    2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
    3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
    4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
    5. Статьи можно расшарить в соцсетях, нажав на иконку сети: