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

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

Адаптивный веб-дизайн (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 определять ширину экрана и выполнять какие-то функции..