Адаптивная вёрстка

Эта статья посвящена созданию адаптивного шаблона без использования каких-либо фреймворков.

Адаптивная шаблон верстается под четыре размера экрана:

  • телефоны (<768px)
  • планшеты (768px — 991px)
  • стандартные мониторы (992px — 1199px)
  • широкоформатные мониторы (>1200px)
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

.clearfix::before, .clearfix::after,
.container::before, .container::after,
.container-fluid::before, .container-fluid::after,
.row::before, .row::after
{
	content: " ";
	display: table;
	clear: both;
}

.container, .container-fluid
{
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.row 
{
	margin-left: -15px;
	margin-right: -15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, 
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12
{
	float: left;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block
{
	display: none;
}

/* Extra small devices (phones, 767px and down) */
@media screen and (max-width: 767px) 
{
	.col-xs-1 { width: 8.33333333333%; }
	.col-xs-2 { width: 16.66666666666%; }
	.col-xs-3 { width: 25%; }
	.col-xs-4 { width: 33.33333333333%; }
	.col-xs-5 { width: 41.66666666666%; }
	.col-xs-6 { width: 50%; }
	.col-xs-7 { width: 58.33333333333%; }
	.col-xs-8 { width: 66.66666666666%; }
	.col-xs-9 { width: 75%; }
	.col-xs-10 { width: 83.33333333333%; }
	.col-xs-11 { width: 91.66666666666%; }
	.col-xs-12 { width: 100%; }	
	
	.visible-xs-block { display: block; }
	.visible-xs-inline { display: inline; }
	.visible-xs-inline-block { display: inline-block; }
	.hidden-xs { display: none; }
}


/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) 
{
	.container { width: 750px; }
	
	.col-sm-1 { width: 8.33333333333%; }
	.col-sm-2 { width: 16.66666666666%; }
	.col-sm-3 { width: 25%; }
	.col-sm-4 { width: 33.33333333333%; }
	.col-sm-5 { width: 41.66666666666%; }
	.col-sm-6 { width: 50%; }
	.col-sm-7 { width: 58.33333333333%; }
	.col-sm-8 { width: 66.66666666666%; }
	.col-sm-9 { width: 75%; }
	.col-sm-10 { width: 83.33333333333%; }
	.col-sm-11 { width: 91.66666666666%; }
	.col-sm-12 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 991px)
{
	.visible-sm-block { display: block; }
	.visible-sm-inline { display: inline; }
	.visible-sm-inline-block { display: inline-block; }
	.hidden-sm { display: none; }
}


/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px)
{
	.container { width: 970px; }
	
	.col-md-1 { width: 8.33333333333%; }
	.col-md-2 { width: 16.66666666666%; }
	.col-md-3 { width: 25%; }
	.col-md-4 { width: 33.33333333333%; }
	.col-md-5 { width: 41.66666666666%; }
	.col-md-6 { width: 50%; }
	.col-md-7 { width: 58.33333333333%; }
	.col-md-8 { width: 66.66666666666%; }
	.col-md-9 { width: 75%; }
	.col-md-10 { width: 83.33333333333%; }
	.col-md-11 { width: 91.66666666666%; }
	.col-md-12 { width: 100%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px)
{
	.visible-md-block { display: block; }
	.visible-md-inline { display: inline; }
	.visible-md-inline-block { display: inline-block; }
	.hidden-md { display: none; }
}


/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) 
{
	.container { width: 1170px; }
	
	.col-lg-1 { width: 8.33333333333%; }
	.col-lg-2 { width: 16.66666666666%; }
	.col-lg-3 { width: 25%; }
	.col-lg-4 { width: 33.33333333333%; }
	.col-lg-5 { width: 41.66666666666%; }
	.col-lg-6 { width: 50%; }
	.col-lg-7 { width: 58.33333333333%; }
	.col-lg-8 { width: 66.66666666666%; }
	.col-lg-9 { width: 75%; }
	.col-lg-10 { width: 83.33333333333%; }
	.col-lg-11 { width: 91.66666666666%; }
	.col-lg-12 { width: 100%; }
	
	.visible-lg-block { display: block; }
	.visible-lg-inline { display: inline; }
	.visible-lg-inline-block { display: inline-block; }
	.hidden-lg { display: none; }
}


/************************************ END ****************************************/
[class^='col-'] { border: 1px solid #555; height: 30px; }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *