Scribd
Upload
10 views

WEBAPP Lesson 6 and 7 - included

Chapter 7 discusses responsive web design (RWD) and the use of media queries to ensure optimal user experience across various devices. It covers viewport settings, grid-view layouts, and how to implement media queries for different screen sizes and orientations. Additionally, it provides guidance on creating responsive images and videos using CSS properties to maintain their aspect ratios and scaling behavior.

Uploaded by

Rovell Asidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

WEBAPP Lesson 6 and 7 - included

Chapter 7 discusses responsive web design (RWD) and the use of media queries to ensure optimal user experience across various devices. It covers viewport settings, grid-view layouts, and how to implement media queries for different screen sizes and orientations. Additionally, it provides guidance on creating responsive images and videos using CSS properties to maintain their aspect ratios and scaling behavior.

Uploaded by

Rovell Asidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

CHAPTER 7

Responsive Web
And Media Queries
CSS3 Responsive Web Design
Responsive web design provides an optimal experience, easy reading
and easy navigation with a minimum of resizing on different devices such
as desktops, mobiles, and tabs).
Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops,


tablets, and phones. Your web page should look good, and be easy
to use, regardless of the device.
RWD- The ViewPort

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a


mobile phone than on a computer screen.

Setting the Viewport:

You should include the following <meta> viewport element in all


your web pages:

<meta name="viewport" content="width=device-width, initial-


scale=1.0">
RWD – Grid-View

Many web pages are based on a grid-view, which means that the
page is divided into columns:

Using a grid-view is very helpful when designing web pages. It


makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total


width of 100%, and will shrink and expand as you resize the
browser window.
Building a Responsive Grid-View

To use a responsive grid-view with 12 columns, we must


calculate the percentage for one column: 100% / 12 columns =
8.33%.

Then we make one class for each of the 12 columns,


class="col-" and a number defining how many columns the
section should span:
RWD – Media Queries

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties


only if a certain condition is true.

If the browser window is 600px or smaller, the background color


will be lightblue:

@media only screen and (max-width: 600px) {


body {
background-color: lightblue;
}
}
RWD – Media Queries

Add a Breakpoint

In media queries, we can add a breakpoint where certain parts


of the design will behave differently on each side of the
breakpoint.

Use a media query to add a breakpoint at 768px


RWD – Media Queries

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending


on the orientation of the browser.

Example:

The web page will have a lightblue background if the orientation is in


landscape mode:

@media only screen and (orientation: landscape) {


body {
background-color: lightblue;
}
}
RWD – Media Queries

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different


screen sizes:

Example:

/* If the screen size is 600px wide or less, hide the element */


@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
RWD – Media Queries
Change Font Size With Media Queries

Example:

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
RWD – Images

Create Responsive Images

Add HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Add CSS:

If you want the image to scale both up and down on


responsiveness, set the CSS width property to 100% and height to
auto:

.responsive {
width: 100%;
height: auto;
}
RWD – Images

If you want an image to scale down if it has to, but never scale
up to be larger than its original size, use max-width: 100%:

.responsive {
max-width: 100%;
height: auto;
}
RWD – Images

If you want to restrict a responsive image to a maximum size,


use the max-width property, with a pixel value of your choice:

.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
RWD – Videos

Using The width Property

If the width property is set to 100%, the video player will be


responsive and scale up and down:

video {
width: 100%;
height: auto;
}
RWD – Videos

Using The max-width Property

If the max-width property is set to 100%, the video player will


scale down if it has to, but never scale up to be larger than its
original size:

video {
max-width: 100%;
height: auto;
}
RWD – Videos

Add a Video to the Example Web Page

We want to add a video in our example web page. The video will
be resized to always take up all the available space:

video {
width: 100%;
height: auto;
}

You might also like