Responsive Web Design Using Media Queries

RESPONSIVE WEB
DESIGN:
 Responsive Web Design is about using HTML
and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on
all devices (desktops, tablets, and phones).
 It is about creating web sites which
automatically adjust themselves to look good
on all devices, from small phones to large
desktops.
 A responsive web design will automatically
adjust for different screen sizes and viewports.
Responsive Design need to include following things:
1. meta
<meta name="view-port" content="width=devicewidth,initial-scale=1.0">
2. fluid images : image width and height in %
3. display: grid
4. flex box : flex-wrap, flex-direction
5. columns
6. @media queries
VIEW PORT
 The viewport is the user's visible area of a web page.
 It is the part of the document we are viewing.
 The viewport varies with the device and will be smaller on a mobile phone than on a computer screen.
 To create a responsive website, add <meta> tag to all our web pages.
 Media properties use “viewport” to control the appearance of content on screen.
Setting The Viewport:
 HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
Syntax:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 This will set the viewport of our page, which will give the browser instructions on how to control the page's
dimensions and scaling.
 The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
depending on the device).
 The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Responsive Images:
 Responsive images are images that scale nicely to fit any browser size.
 Using the width Property
o If the CSS width property is set to 100%, the image will be responsive and scale up and down.
o Syntax: <img src="" style="width:100%;">

 Using the max-width Property
o If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be
larger than its original size.
o Syntax: <img src="" style="max-width:100%;height:auto;">

Responsive Text:
 The text size can be set with a "vw" unit, which means the "viewport width".
 That way the text size will follow the size of the browser window.
 Viewport is the browser window size. 1vw = 1% of viewport width.
 Example: <h1 style="font-size:10vw">Hello World</h1>

Examples:
Responsive Text and Images:

<html>
<head>
<meta name="viewport" content="width=device-
width,initial-scale=1.0">
</head>
<body>
<img src=“pic1.png" style="max-width:100%">
<h1 style="font-size:5vw">This is a responsive text</h1>
</body>
</html>
MEDIA QUERIES:
 Media query is a CSS technique introduced in CSS3.
 In addition to resize text and images, it is also common to use media queries in
responsive web pages.
 With media queries we can define completely different styles for different browser sizes.
 Media queries can be used to check many things, such as:
o width and height of the viewport
o width and height of the device
o orientation (is the tablet/phone in landscape or portrait mode)
 It uses the @media rule to include a block of CSS properties only if a certain condition is
true.
 Media defines
a) screen
b) print
c) speech
 Query defines
a) min-width
b) max-width
c) orientation
 @media rule:
o The @media rule is used in media queries to apply different styles for different media types/devices.
o Syntax:
@media mediaType and (mediaQuery)
{
//Code;
}
o and: The and keyword combines a media feature with a media type or other media features.
 Some Media Features:
o max-width: The maximum width of the display area, such as a browser
window.
o min-width: The minimum width of the display area, such as a browser
window.
o orientation: The orientation of the viewport (landscape or portrait mode)
o width: The viewport width.
<!DOCTYPE html>
<html>
<head>
<title>Media</title>
<style>
@media screen and (min-width:400px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<h2>Responsive Design</h2>
<p>Media queries in CSS</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Media</title>
<style>
@media screen and (orientation:landscape) {
body {
background-color: yellow;
@media screen and (orientation:portrait) {
body {
background-color: lightcyan;
</style>
</head>
<body>
<h2>Responsive Design</h2>
<p>Media queries in CSS</p>
</body>
Media Queries with multiple breakpoints:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: orange;
}
@media screen and (max-width:1000px) //breakpoint 1
{
body
{
background-color: red;
}
}
@media screen and (max-width:600px) //breakpoint 2
{
body
{
background-color: cyan;
}
}
</style>
</head>
<body>
<h1>This is a media query demo</h1>
</body>
</html>
Media Queries:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body
{
background-color: blue;
}
h1
{
color: white;
font-size:5vw;
}
@media screen and (max-width:700px)
{
body
{
background-color: pink;
}
h1
{
color: blue;
font-size:4vw;
}
}
</style>
</head>
<body>
<h1>This is a media query demo</h1>
</body>
</html>

Responsive Web Design Using Media Queries

Uploaded by

Responsive Web Design Using Media Queries

Uploaded by

RESPONSIVE WEB

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

o Syntax: <img src="" style="width:100%;">

o Syntax: <img src="" style="max-width:100%;height:auto;">

 Example: <h1 style="font-size:10vw">Hello World</h1>

Responsive Text and Images:

@media screen and (orientation:landscape) {

@media screen and (orientation:portrait) {

<p>Media queries in CSS</p>

You might also like