Эта статья посвящена созданию адаптивного шаблона без использования каких-либо фреймворков.
Адаптивная шаблон верстается под четыре размера экрана:
- телефоны (<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; }
Добавить комментарий