bootstrap 3
xs 0 -767px
sm 768 - 991px
md 992 - 1199px
lg 1200+
bootstrap 4
xs 0 -543px
sm 544 - 767px
md 768 - 991px
lg 992 - 1199px
xl 1200+
Responsive Media query
All media query format ,
@media (min-width: 1200px) and (max-width:1366px){
//desktop
Class...
}
@media (min-width:992) and (max-width:1199px){
/*desktop */
Class...
}
@media (min-width:768px) and (max-width: 991px){
/*tab-landscape */
Class...
}
@media (max-width: 767px) {
/* Class...
*/
*/
}
@media (min-width: 768px) {
/* Class...
*/
*/
}
@media (min-width:641px) and (max-width: 767px){
/*tab- portrait */
Class...
}
@media (min-width:481px) and (max-width: 640px){
/*mobile-landscape */
Class...
}
@media (min-width: 320px) and (max-width: 480px){
/*mobile-portrait */
Class...
}
@media (max-width: 319px) {
/*mobile-min-versions */
Class...
}-------------------
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
-----------------
Mixed: Mobile, Tablet And Desktop
<div class="row">
<div class="col-xs-7 col-sm-6 col-md-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-md-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-md-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
----------------------
Final mock-up requirements:
1.layout for desktop -1400px(width) x Auto(height)
2.layout for Tab - 768px(width)
3.layout for mobile landscape -480px(width)
4.layout for mobile portrait -320px(width)
--------------
0. Basic wire frame for
Desktop version:
Width of the layout -
1400px.
Height of the layout -
Auto height based on content.
Container width -
1170px.
 |
1. Wire-frame for tablet
and mobile:
Width of layout for tablet - 768px.
Container width -
750px.
Width of layout for mobile - 480px for landscape, 320px for portrait.
Container width -
100% and need 15px margin on both sides.
Basic Font : Typography
Use font sizes in that bootstrap typography
i) h1 Bootstrap heading (36px)
ii) h2 Bootstrap heading (30px)
iii) h3 Bootstrap heading (24px)
iv) h4 Bootstrap heading (18px)
v) h5 Bootstrap heading (14px)
vi) h6 Bootstrap heading (12px)
Understand bootstrap standards and design the layout.
a. Make a layout should be based on grids then only we can make the layout responsive for mobile and tablets.
b. Please refer the following links to follow the bootstrap standards.
i) http://www.mobilespoon.net/2015/01/3-serious-reasons-why-responsive-ui-is.html
ii) http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-layout.php
iii) https://getbootstrap.com/examples/grid/
