Scribd
Upload
10 views6 pages

Flexible Layout Student

Uploaded by

kayla
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 views6 pages

Flexible Layout Student

Uploaded by

kayla
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/ 6

(Fluid page)

Flexible Layouts
It is the ability of a web page layout to be flexible
and responsive no matter what device is used.
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.
Viewport Meta Tag

 A <meta> viewport element gives the browser instructions on


how to control page’s dimension and scaling.
 The width=device-width sets the width of the browser to follow
the screen-width of the device.
 The initial-scale=1.0 sets the initial zoom level when the page
is first loaded by the browser.
What Grid
is System
?
A grid system is a set of measurements a graphic
designer can use to align and size objects within
the given format.
Things to consider before creating your grid
 Design - Decide if your columns will be of equal or unequal
system:
width. You need to know how many columns you will
use
- Will you resize columns proportionally with viewport
 Behaviorwidth changes?
- Will you change your columns while keeping gutters
fixed?
 Grid System -- You
Willmay
youeither
changeusethe
an HTML grid
number ofsystem or CSS
columns grid
at specific
system.
to use breakpoints?

Example Grid System for Web:


Responsive Grid View is
divided into 12 columns

You might also like