show & tell - the anatomy of a responsive website
TRANSCRIPT
MAKING
STUFF
FIT PROPER
THE KEYINGREDIENTS
Viewport meta tag (HTML)
Media queries (CSS)
A fluid grid (HTML & CSS)
<meta name="viewport" content="width=device-width, initial-scale=1">
Tells the browser how to handle the page
Viewport
METATAG
<meta name="viewport" content="width=device-width, initial-scale=1">
Instructs the page to match the screen's width in device
independent pixels
Tell the browser what this meta tag does
Establishes a 1:1 relationship between CSS pixels and device independent
pixels regardless of device orientation
TitleThis is a test page for different viewport attribute settings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat maximus nisi aliquet tempor.
Morbi eros magna, rutrum eget lectus vitae, malesuada consequat mauris. Cras sodales est non ornare convallis.
Title
This is a test page for different viewport attribute settings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat maximus nisi aliquet tempor.
Morbi eros magna, rutrum eget lectus vitae, malesuada consequat mauris. Cras sodales est non ornare convallis.
WITHOUT WITH
MEDIA
QUERIES
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and colour
MEDIA
QUERIES
@media (max-width: 728px) { background-color: green; }
- Widths (Minimum and maximum)
- Orientation (Landscape and portrait)
- Device (TV, handheld...)
- Display (Screen, print ...)
MEDIA
QUERIES
A grid system that combines fixed sizes with percentages to make a grid that can 'flow' across any device size.
FLUID
GRIDS
100%
25% 25% 25% 25%
20px 20px 20px
100%
20px 20px 20px
25% 25% 25% 25%
100%
OFFICIAL
IS IT RESPONSIVE? TEST