Scribd
Upload
11 views5 pages

Experiment No. 04: Title

Cse

Uploaded by

sahilmakandar15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views5 pages

Experiment No. 04: Title

Cse

Uploaded by

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

T.Y.B.Tech (C.S.E.

)-II Subject: Web Technologies

Experiment No. 04

Title: Create a responsive homepage for our college website.


(Include responsive features like setting viewport, grid, and media queries.)

Objective: To study Responsive Web Design.

Theory:

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on
all devices, from small phones to large desktops.

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.

Set the viewport


Pages optimized for a variety of devices must include a meta viewport tag in the head of the document.
This tag tells the browser how to control the page's dimensions and scaling.

To try to provide the best experience, mobile browsers render the page at a desktop screen width (usually
about 980px, though this varies across devices), and then try to make the content look better by increasing
font sizes and scaling the content to fit the screen. This can make fonts look inconsistent and require users
to zoom in to see and interact with the content.
<!DOCTYPE html>
<html lang="en">
<head>
…
T.Y.B.Tech (C.S.E.)-II Subject: Web Technologies

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


…
</head>
…
Using the meta viewport value width=device-width tells the page to match the screen's width in device-
independent pixels (DIP), a standard visual pixel unit (which can be made up of many physical pixels on a
high-density screen). This lets the page reflow content to match different screen sizes.

Fig a. Without viewport Fig b. with viewport .

With the viewport meta tag set, you can read the page without zooming in. Some browsers keep the page's
width constant when rotating to landscape mode, and zoom to fill the screen instead of reflowing. Adding the
value initial-scale=1 tells browsers to set a 1:1 relationship between CSS pixels and device-independent pixels
regardless of device orientation, letting the page take advantage of the full landscape width.
Images
An image with fixed dimensions causes the page to scroll if it's larger than the viewport. We recommend
giving all images a max-width of 100%, which shrinks images to fit the available space while preventing them
from stretching beyond their initial size.
In most cases, you can do this by adding the following to your style sheet:
img {
max-width: 100%;
display: block;
}
Add the dimensions of the image to the img element
Even when you set max-width: 100%, we still recommend adding width and height attributes to your <img>
tags so the browser can reserve space for images before they load. This helps prevent layout shifts.
Modern CSS layout techniques such as Flexbox, Grid Layout, and Multicol make creating these flexible
grids much easier.
T.Y.B.Tech (C.S.E.)-II Subject: Web Technologies

Flexbox
Use Flexbox when you have a set of items of different sizes and you want them to fit comfortably in a row or
multiple rows, with smaller items taking up less space and larger ones taking more space.
.items {
display: flex;
justify-content: space-between;
}
You can use Flexbox to display items as a single row, or wrapped onto multiple rows as the available space
decreases.

Grid View -
Grid-view means 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.
While building responsive grid-view, first ensure that all HTML elements have the box-sizing property set to
border-box. i.e. padding & border are included in total width & height of elements.
*{
margin: 0;
box-sizing: border-box;
}
 First 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: -
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

For example, consider and webpage containing following css:


.col-1 {width: 8.33%; color:black;border:1px solid}
.col-2 {width: 16.66%;color:blue;border:1px solid}
.col-3 {width: 25%;color:yellow;border:1px solid}
T.Y.B.Tech (C.S.E.)-II Subject: Web Technologies

<div class="col-1">
<h1>A</h1>
</div>
<div class="col-2">
<h1>B</h1>
</div>
<div class="col-3">
<h1>C</h1>
</div>

Fig.c. Effect of Grid view in above example

Media Query-
It 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.
Add Breakpoint - Media queries can help to add breakpoint where certain parts of the design will behave
differently on each side of the breakpoint. e.g. add breakpoint at 700px.
Hide Element - Using media query it is possible to hide elements on different sizes.
Change Font Size - Use media queries to change the font size of an element on different screen sizes.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Media queries can be used to check many things, such as:
 Width and height of the viewport
 Orientation of the viewport (landscape or portrait)
 Resolution
A media query consists of a media type and can contain one or more media features, which resolve to either
true or false.
@media not | only mediatype and (media feature) and (media feature) {
CSS-Code;
}
 not: This keyword inverts the meaning of an entire media query.
 only: This keyword prevents older browsers that do not support media queries from applying the
specified styles. It has no effect on modern browsers.
 and: This keyword combines a media type and one or more media features.
T.Y.B.Tech (C.S.E.)-II Subject: Web Technologies

The result of the query is true if the specified media type matches the type of device the document is being
displayed on and all media features in the media query are true.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal
cascading rules.

Algorithm:

1. Design college website homepage using html.


2. Add responsive features like setting viewport, grid, and media queries.

Key Concepts: Viewport, Grid, Media Query.

You might also like