КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

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

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

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

I.

Во-первых, предпочтительнее использовать размеры в процентах и величину шрифта в em или в процентах.

II.

Если хотите убрать горизонтальную полосу прокрутки и масшабировать шрифты, используйте мета-тэг viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

III.

С помощью 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 определять ширину экрана и выполнять какие-то функции..
2016.04.23 80

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика