Scribd
Upload
50 views16 pages

What Is Responsive Web Design

Responsive web design allows web pages to automatically adapt to different screen sizes and devices. It uses HTML and CSS to resize and rearrange content and images to fit various screen widths. Key aspects include using a viewport meta tag to control page scaling and media queries in CSS to apply different styling rules depending on screen width or height.

Uploaded by

Muqadas Hassan
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
50 views16 pages

What Is Responsive Web Design

Responsive web design allows web pages to automatically adapt to different screen sizes and devices. It uses HTML and CSS to resize and rearrange content and images to fit various screen widths. Key aspects include using a viewport meta tag to control page scaling and media queries in CSS to apply different styling rules depending on screen width or height.

Uploaded by

Muqadas Hassan
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/ 16

What is Responsive Web Design?

• Responsive web design makes your web page look good


on all devices.
• Responsive web design uses only HTML and CSS.
• Responsive web design is not a program or a
JavaScript.
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.
• Web pages should not leave out information to fit smaller
devices, but rather adapt its content to fit any device:
• It is called responsive web design when you use CSS and HTML
to resize, hide, shrink, enlarge, or move the content to make it
look good on any screen.
What is 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.
• Before tablets and mobile phones, web pages were
designed only for computer screens, and it was common
for web pages to have a static design and a fixed size.
• Then, when we started surfing the internet using tablets
and mobile phones, fixed size web pages were too large
to fit the viewport. To fix this, browsers on those devices
scaled down the entire web page to fit the screen.
Viewport
• <meta> viewport element in all your web pages:
• This gives the browser instructions on how to control the
page's dimensions and scaling.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
• part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
• part sets the initial zoom level when the page is first
loaded by the browser.
What is a Media Query?

• Media query is a CSS technique introduced in CSS3.


• @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;
  }
}
While there are several different items we can query on, the ones used
most
often for responsive web design are min‐width, max‐width, min‐height
and
max‐height.
Attribute Result
• min‐width Any browser width over the value defined in the query.
• max‐width Any browser width below the value defined in the query.
• min‐height Any browser height over the value defined in the query.
• max‐height Any browser height below the value defined in the query.
• orientation=portrait
• Any browser where the height is greater than or equal to the
• width.
• orientation=landscape Any browser where the width is greater than the height.
Media Queries
@media (min-width: 768px) {
.my-div { width:50%; float:left }
h1 { font-size:1.6em; }
}
@media (min-width: 1024px) {
.my-div { width:33%; }
h1 { font-size:1.75em; }
}
@media (min-width: 1280px) {
h1 { font-size:2.0em; }
}

You might also like