DSD-4708-A

How to read media queries

  • When you see @media screen and (max-width: 768px) read it as "the screen is less than 768px wide"
  • When you see @media screen and (min-width: 1024px) read it as "the screen is greater than 1024px wide"

Starter template

<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="path-to-css-folder]/bootstrap.min.css">
</head>

<body>
<div class="container">
[your html here]
</div>
<script src="[path-to-js-folder]/bootstrap.min.js"><script>
</body>
</html>

How to structure media queries

  • Best practices for media queries is to put them at the bottom of your CSS so they override the global styles at the top
  • The order of your media queries is important! The easy way to do it is to put the widest rules at the top, and the narrowest rules at the bottom:
    <--The bulk of your CSS goes up here-->



    <-- Media queries start here-->

    <--Boostrap XL (Large Desktop)-->
    @media screen and (min-width: 1200px){}

    <--Bootstrap L (Desktop)-->
    @media screen and (max-width: 992px){}

    <--Bootstrap M (Tablet: Portrait)-->
    @media screen and (max-width: 768px){}

    <--Bootstrap S:-->
    @media screen and (max-width: 576px){}

    <--(if necessary) Mobile: Landscape-->
    @media screen and (max-width: 480px){}

    <--(if necessary) Mobile: Portrait-->
    @media screen and (max-width: 320px){}

Most frequently used breakpoints for responsive design

  • It should go without saying that the breakpoints you choose should be based on features of your design rather than on any hard and fast rules
  • Before you decide to impose breakpoints on your design, please read Google's guide on how to chose breakpoints
  • That said, the breakpoints in this Liveweave sketch could serve as a basic starting point