🏠

адаптивная верстка пример

адаптивная верстка

Адаптиваная верстка веб страници - это способ контента подстраиваться под все размеры дисплеев, ориентацию. С помощью разположения блоков в процентном соотношении и медиазапросов.

Например:

section{

  color:green;

  width:900px;

}

section p{

  margin:100px;

}

@media(max-width:700px){

  section{

    max-width: 100%;

    /* тег section будет максимально до 100% */

  }

  section p{

    margin:1%;

    /* тег p будет в теге section с отступом в 1% */

  }

}

стиль будет применяться если размер экрана окажется меньше 700px

Основаная техника адаптивной верстки включает в себя тег вьюпорт:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

адаптивная верстка на флексах, шаблон для сайта будет выглядеть так:

GITHUB

*{
margin:0;
}
body{
background: linear-gradient(rgba(255,250,0,0.3), rgba(0,0,255,0.3));
min-height: 100vh;
}
main{
display:flex;
justify-content: center;
align-items: flex-start;
max-width: 100%;
}
article{
display:flex;
max-width: 100%;
width:900px;
background: rgba(33,33,33,0.3);
flex-direction: column; /* раставляет элементы с верху в низ */
}
footer{
display:flex;
justify-content: space-around; /* распределяет блоки во всей ширине */
align-items: center; /* выравнивает по центру */
max-width: 100%;
width:900px;
min-height: 70px;
background: rgba(0,0,0,0.3);
}
/* .box - чтобы на не ставить футер в аркикл т.к. это разные элементы тегов html5 и могут нарушить смысловую нагрузку всего сайта */
.box{
display:flex;
justify-content: center;
align-items: flex-start;
max-width: 100%;
flex-direction: column;
}
aside{
position:sticky; /* Прилипляет блок */
top:0; /* значение куда блок прилипнет */
width:200px;
height:300px;
background:green;
}
article p{
margin:3%;
}
@media(max-width:1100px){
aside{
display:none;
}
}
article h1{
text-align: center;
}
strong a{
margin:3%;
}

На главную страницу BloZhik{a}!

Сайт работает на быстром хостинге со встроенным кэшем.

the best hosting

Система комментирования SigComments