Editing Responsive design (section)

== Strategies for Using Media Queries ==

Media queries, which let you assign styles to a page based on the destination browser’s width and height.

3 target screens: * smart phone * tablet * laptop/desktop computers

Strategies: 

===Adjust columns:===
Multiple side-by-side columns look great on a big monitor (and even on a tablet in landscape mode), but not so much on a phone. '''Bringing the page down to 2 or 3 columns''' 

===Liquid design:===
'''widths of your content divs to <code>auto</code> or <code>100%</code>'''. This setting converts your page from a fixed-width design to a liquid, or flexible, design, that constantly adjusts itself to the size and orientation of the screen. However you can still use fixed-width for a desktop browser, such as setting the width of div to 900px, but a phone is unlikely to have that width, which means great part of the div will be off-screen.<br />

===Tighten up white space:===

in large screen ample space between content is desirable, but on small screens results into elements being rendered too far apart, like islands of content. Reduce <code>padding</code> and <code>margin</code>. 

===Less contrasting font sizes:===
differences between large size of headings and small body text, must be more moderate 

===Changing navigation menus:===
long menus will break or disappear in small screens. CSS doesn't provide a good solution for this. The effective solution is to use JavaScript to dynamically change the navigation menu into an HTML drop-down menu (A Google search on &quot;responsive menu js library&quot; will yield douzens of possible options). 

===Hide content for mobile:===
Too much information on a phone can be overwhelming. You can use CSS to hide content that you think is '''superfluous''' for mobile users by setting the CSS <code>display</code> property to <code>none</code>. 

===Use background images:=== 
A large image on a phone will be hard to display fully and take a long time to display. To avoid this problem create 2 versions of the same image a large and smaller (for mobile). In the CSS, if you place the '''image as background''' of a div, you can change that images, in 2 style sheet one for desktop another for mobile.

[https://codepen.io/PublicationStation/pen/Yeddzg Example in CodePen]



===Media Query template===

<pre>/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
        .logo { // liquid design 
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
        .logo { // liquid design 
            width: 100%;
            height: 60px;
            background-image: url(images/small_logo.png)
            }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .logo { // fixed design 
    width: 960px;
    height: 120px;
    background-image: url(images/large_logo.png)
    }
}
</pre>

=== Mediaquery breakpoints===

Breakpoints used by [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)

<pre>
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {

}
</pre>

CSS media queries can do more than just check the width of a browser. The current media query standard states that you can check for height, orientation (whether a visitor holds a mobile phone in portrait or landscape mode), and even whether a device uses a color or monochrome screen. There are a few other browser characteristics you can check with media queries, but not all browsers support the queries. For more on media queries see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax.

=== From default design to media-queries ===

Don’t need to create three separate sets of styles. 

You can start with a '''default design'''; that is, '''a design that works without media queries, for either mobile or desktop, choose what approach you prefer'''.
 
'''Then create media-query styles to override the default styles and reformat the page for the particular screen width.'''


----