Show & tell - The anatomy of a responsive website
-
Upload
dandineenuob -
Category
Design
-
view
70 -
download
0
Transcript of Show & tell - The anatomy of a responsive website
![Page 1: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/1.jpg)
![Page 2: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/2.jpg)
MAKING
STUFF
FIT PROPER
![Page 3: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/3.jpg)
THE KEYINGREDIENTS
Viewport meta tag (HTML)
Media queries (CSS)
A fluid grid (HTML & CSS)
![Page 4: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/4.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1">
Tells the browser how to handle the page
Viewport
METATAG
![Page 5: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/5.jpg)
<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
![Page 6: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/6.jpg)
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
![Page 7: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/7.jpg)
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
![Page 8: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/8.jpg)
MEDIA
QUERIES
@media (max-width: 728px) { background-color: green; }
![Page 9: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/9.jpg)
- Widths (Minimum and maximum)
- Orientation (Landscape and portrait)
- Device (TV, handheld...)
- Display (Screen, print ...)
MEDIA
QUERIES
![Page 10: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/10.jpg)
A grid system that combines fixed sizes with percentages to make a grid that can 'flow' across any device size.
FLUID
GRIDS
![Page 11: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/11.jpg)
100%
25% 25% 25% 25%
20px 20px 20px
100%
20px 20px 20px
25% 25% 25% 25%
![Page 12: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/12.jpg)
100%
OFFICIAL
IS IT RESPONSIVE? TEST
![Page 13: Show & tell - The anatomy of a responsive website](https://reader033.fdocuments.net/reader033/viewer/2022051709/587540641a28abb8208b4dcb/html5/thumbnails/13.jpg)