Scribd
Upload
6 views23 pages

Week 4 Complete

The document discusses various web design approaches including Fixed, Fluid, Adaptive, and Responsive designs, highlighting their characteristics and how they adapt to different devices. It emphasizes the importance of Responsive Web Design, which uses HTML and CSS to ensure websites look good on all devices, and introduces Media Queries for tailoring styles based on device conditions. Additionally, it covers Flexbox as a new layout mode in CSS3 that improves element behavior across different screen sizes.

Uploaded by

muhammadahmed1431432
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
6 views23 pages

Week 4 Complete

The document discusses various web design approaches including Fixed, Fluid, Adaptive, and Responsive designs, highlighting their characteristics and how they adapt to different devices. It emphasizes the importance of Responsive Web Design, which uses HTML and CSS to ensure websites look good on all devices, and introduces Media Queries for tailoring styles based on device conditions. Additionally, it covers Flexbox as a new layout mode in CSS3 that improves element behavior across different screen sizes.

Uploaded by

muhammadahmed1431432
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/ 23

Fixed, Fluid, Adaptive, and Responsive web design

• Fixed websites have a set width and resizing the browser


or viewing it on different devices won’t affect on the way
the website looks.
• Fluid websites are built using percentages for widths. As a
result, columns are relative to one another and the
browser allowing it to scale up and down fluidly.
• Adaptive websites introduce media queries to target
specific device sizes, like smaller monitors, tablets, and
mobile.
• Responsive websites are built on a fluid grid and use
media queries to control the design and its content as it
scales down or up with the browser or device.
Different devices has different design

• we can't use reflow across all devices.


Why we can't use reflow across all devices?
Reflow across all devices

• New form factors come out all the time


Changing Layouts
Changing Layouts

Mobile Tablet Monitor


Responsive Web Design

• Responsive web design is the practice of building a website suitable to


work on every device and every screen size, no matter how large or small,
mobile or desktop.
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.


Why Responsive Web Design?
Responsive Web Design

• Monitor Tablet Mobile


Media Queries

• Media Queries is a W3C Candidate Recommendation—a widely reviewed


document which is ready for implementation by browser vendors.

• It's an extension of media dependent stylesheets tailored for different media


types (i.e. screen and print) found in CSS2.

• It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

• A media query consists of a media type and an expression to check for certain
conditions of a particular media feature. The most commonly used media
feature is width.
Media Queries Examples

• Example 1: If the browser window is smaller than 500px, the background


color will change to light blue:

• @media only screen and (max-width:500px)

{
body {
background-color: lightblue;
}
}
Media Queries Examples (Example 1)
Media Queries Examples (Example 1)
Media Queries Examples 2

• Example 2:The following example shows a menu that will float to the left
of the page if the viewport is 480 pixels wide or wider (if the viewport is
less than 480 pixels, the menu will be on top of the content):

• @media screen and (min-width: 480px) {


#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
Media Queries Examples 2
Media Queries Examples 2
Available Media Query Expression

Width Orientation Color


Height Aspect-ratio Color-index
Device-width Device-aspect-ratio Monochrome
Device-height Grid Resolution
Flexbox

• Flexible boxes, or flexbox, is a new layout mode in CSS3.


• Use of flexbox ensures that elements behave predictably when the page
layout must accommodate different screen sizes and different display
devices.
• For many applications, the flexible box model provides an improvement
over the block model in that it does not use floats, nor do the flex
container's margins collapse with the margins of its contents.
Flexbox (Example)

Flexbox consists of flex containers and flex items.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Flexbox (Example continue)

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>
Flexbox (Example out put)
Flexbox Properties
Property Description

display Specifies the type of box used for an HTML element

flex-direction Specifies the direction of the flexible items inside a flex container

justify-content Horizontally aligns the flex items when the items do not use all available
space on the main-axis

align-items Vertically aligns the flex items when the items do not use all available
space on the cross-axis

flex-wrap Specifies whether the flex items should wrap or not, if there is not
enough room for them on one flex line

align-content Modifies the behavior of the flex-wrap property. It is similar to align-


items, but instead of aligning flex items, it aligns flex lines

flex-flow A shorthand propert for flex-direction and flex-wrap

order Specifies the order of a flexible item relative to the rest of the flex items
inside the same container

You might also like