адаптивная верстка пример
Адаптиваная верстка веб страници - это способ контента подстраиваться под все размеры дисплеев, ориентацию. С помощью разположения блоков в процентном соотношении и медиазапросов.
Например:
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%;
}
ChikChicly SpaceHands ForsmaZhorovich
to list