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

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

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет, существующее устройство или то, что появится только в будущем.

  • Во-первых, предпочтительнее использовать размеры в процентах и величину шрифта в em или в процентах.
  • Если хотите убрать горизонтальную полосу прокрутки и масшабировать шрифты, используйте мета-тэг viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • С помощью CSS3 MediaQueries можно задавать CSS-правила для различных типов устройств. Это логические выражения, которые позволяют задавать CSS-стили к элементам в зависимости от выполнения каких-то условий. Для этого в CSS есть тег @media. Наиболее часто используемые его типы - screen и print, который применяется при выводе на печать. С помощью этого тега вы можете изменять любые CSS-свойства для любых элементов страницы. Например, поиграемся со стилями тестового блока для разных экранов:
    div#media_queries_test{
      position: relative;
      margin: 10px auto;
      width: 90%;
      height: 111px;
      box-sizing: border-box;
      background: #3c27f3;
      font-size: 2em;
      border-radius: 11px;
      text-align: center;
      line-height: 111px;
      box-shadow: 0 0 3px 7px #0c5a1a;
      transition: all .5s;
    }
    div#media_queries_test:after{
      content: 'Ширина экрана между 1280 и 1020 пикселов';
      position: absolute;
      top: 5px;
      left: -20px;
      font-size: 13px;
      background: rgba(0, 0, 0, .7);
      line-height: normal;
      color: white;
      padding: 5px;
    }
    @media screen and (min-width:1280px){
      div#media_queries_test{
        width: 70%;
        background: #f3850c;
        font-size: 3em;
      }
      div#media_queries_test:after{
        content: 'Ширина экрана больше 1280px';
      }
    }
    
    @media screen and (max-width:1020px){
      div#media_queries_test{
        width: 50%;
        background: #a8120b;
        font-size: 2em;
      }
      div#media_queries_test:after{
        content: 'Ширина экрана между 1020 и 800рх';
      }
    }
    @media screen and (max-width:800px){
      div#media_queries_test{
        width: 100%;
        background: #0b8e25;
        font-size: 1em;
      }
      div#media_queries_test:after{
        content: 'Ширина экрана меньше 800рх';
      }
    }
    
    /*
    Можно перечислять несколько условий через запятую, которая эквивалентна логическому "или":
    @media screen and (max-width:800px), print and (width:800px){
    }
    Допускается также отрицание:
    @media not screen{
    }
    */
    

    Можно, например, при маленьких экранах прятать основное меню, показывая вместо него другой вариант меню, как я и сделал на своём сайте. В общем, дело только за фантазией,средства есть. Гораздо более простые, чем с помощью javascript определять ширину экрана и выполнять какие-то функции..