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

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