Responsive Web Design e a Ubiquidade da Web
-
Upload
eduardo-shiota-yasuda -
Category
Technology
-
view
5.404 -
download
0
description
Transcript of Responsive Web Design e a Ubiquidade da Web
![Page 1: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/1.jpg)
Responsive Web Design
Eduardo Shiota Yasuda@shiota | www.eshiota.com
e a ubiquidade da web
![Page 2: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/2.jpg)
Uma (breve) Históriado Design na Web
![Page 3: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/3.jpg)
Tim Berners-LeePai do HTTP, HTML, diretor da W3C, e cavaleiro.
![Page 4: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/4.jpg)
Primeira página da Webhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 5: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/5.jpg)
Primeira Página do UOL23/12/1996 - archive.org
![Page 6: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/10.jpg)
![Page 11: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/11.jpg)
EVIL
![Page 12: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/12.jpg)
![Page 13: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/13.jpg)
HTML » Print » Table » Tableless » Standards » ?
![Page 14: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/14.jpg)
http://1to1interactive.net/blog/?p=1718
![Page 15: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/15.jpg)
http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
![Page 16: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/16.jpg)
http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
![Page 17: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/17.jpg)
Jeremy Keith's — @adactio — Instagram
![Page 18: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/18.jpg)
HTML » Print » Table » Tableless » Standards »
Responsive Web Design
![Page 19: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/19.jpg)
Solução agnóstica à plataforma, browser e dispositivo
Responsive Web Design
![Page 20: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/20.jpg)
Desktop
UOL
iPad Portrait iPad Landscape iPhone Portrait
iPhone Landscape
Close, but no cigar.
![Page 21: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/21.jpg)
Desktop Desktop?
UOLClose, but no cigar.
![Page 22: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/22.jpg)
Desktop iPad Portrait iPad Landscape iPhone Portrait
iPhone Landscape
The Boston GlobeResponsivelicious
![Page 23: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/23.jpg)
1. Design flexível+
2. Media Queries+
3. Ajustes e plugins
![Page 24: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/25.jpg)
Tipografia, grid & conteúdo
Flexible Web Design
![Page 26: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/26.jpg)
Target ÷ Contexto = Dimensão
Golden rule
![Page 27: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/27.jpg)
`em`
Tipografia
![Page 28: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/28.jpg)
![Page 29: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/29.jpg)
14px/21px
70px/80px
24px/32px
![Page 30: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/30.jpg)
body { font: normal normal 14px/21px "cabin", sans-serif;}
.headline h1 { font: normal bold 70px/80px "enriqueta", serif;}
.headline p { font-size: 24px; line-height: 32px;}
![Page 31: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/31.jpg)
body » font-size: 100%(16px na maioria dos browsers)
![Page 32: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/32.jpg)
body { font: normal normal 100%/1.5 "cabin", sans-serif;}
![Page 33: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/33.jpg)
target (70px)
target (24px)
target (14px)
CONTEXTO » body (16px)
![Page 34: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/34.jpg)
Target ÷ Contexto = Dimensão
70px ÷ 16px = 4.375em80px ÷ 70px = 1.142857143
24px ÷ 16px = 1.5em32px ÷ 24px = 1.333333
![Page 35: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/35.jpg)
body { font: normal normal 100%/1.5 "cabin", sans-serif;}
.headline h1 { /* 70px ÷ 16px & 80px ÷ 70px */ font: normal bold 4.375em/1.142857143 "enriqueta", serif;}
.headline p { font-size: 1.5em; /* 24px ÷ 16px */ line-height: 1.333333; /* 32px ÷ 24px */}
.blog-post .post-content { font-size: .875em; /* 14px ÷ 16px */}
![Page 36: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/36.jpg)
%
Grids
![Page 37: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/37.jpg)
1000px
65px
20px
660px 320px
![Page 38: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/38.jpg)
#container { width: 1000px;}
.main-content { float: left; width: 660px; margin-right: 20px;}
.side-content { float: left; width: 320px;}
![Page 39: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/39.jpg)
Contexto (1000px)
Target (65px)
Target (20px)
Target (660px) Target (320px)
![Page 40: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/40.jpg)
Target ÷ Contexto = Dimensão
1000px = 100%
660px ÷ 1000px = 66%20px ÷ 1000px = 2%
320px ÷ 1000px = 32%
![Page 41: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/41.jpg)
#container { width: 100%;}
.main-content { float: left; width: 66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */}
.side-content { float: left; width: 32%; /* 32px ÷ 1000px */}
![Page 42: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/42.jpg)
max-width: 100%img, embed, object, video
(IE6 => width: 100%)
Conteúdo
![Page 43: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/43.jpg)
525px
210px
![Page 44: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/44.jpg)
.blog-post .alignright { float: right; margin: 0 0 20px 16px;}
.blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px;}
![Page 45: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/45.jpg)
Contexto (525px)
Target (210px)
![Page 46: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/46.jpg)
Target ÷ Contexto = Dimensão
210px ÷ 525px = 40%
![Page 47: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/47.jpg)
.blog-post .alignright { float: right; margin: 0 0 20px 16px; width: 40%;}
.blog-post .alignright img { max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}
![Page 48: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/48.jpg)
![Page 49: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/49.jpg)
![Page 50: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/50.jpg)
$(function () { $(“#site-content”).find(“.main-content”).fitVids();});
![Page 51: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/51.jpg)
![Page 52: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/52.jpg)
![Page 53: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/53.jpg)
$(function () { $(“#site-content”).find(“.main-content”).fitVids();
// FitText's formula: // // fontSize = elementWidth / (compressor * 10) // fontSize = 70 // elementWidth = 1000 // compressor = 100/70 = 1.428571429 $("#site-content") .find(".headline h1") .fitText(1.428571429, { minFontSize: "36px", maxFontSize: "96px" });});
![Page 54: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/54.jpg)
Tipos e features
Media Queries
![Page 55: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/55.jpg)
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
Tipos
Featurescolorcolor-index(min | max-)aspect-ratio(min | max-)device-aspect-ratio(min | max-)device-height(min | max-)device-width(min | max-)height
(min | max-)widthgridmonochromeorientation(min | max-)resolutionscan-webkit-(min | max-)device-pixel-ratio
![Page 56: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/56.jpg)
ou
<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” />
@media screen and (max-width: 1200px) { /* insert styles here */}
Sintaxe
Uso
[only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]*[, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ]
![Page 57: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/57.jpg)
@media print and (max-width:21cm) {}
@media all and (max-width: 1024px) {}
@media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {}
Exemplos
![Page 58: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/58.jpg)
Exemplos@media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {}
device-width: 1024px
device-height: 768px
orientation: landscape
-webkit-device-aspect-ratio: 1.5(novo iPad)
![Page 59: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/59.jpg)
@media screen and (max-width: 1024px) { // Diminuir a fonte do menu}
@media screen and (max-width: 960px) { // Diminuir Header, logo e H2 // Galeria de fotos em 3 colunas // Nav fixo à esquerda // Search input maior}
@media screen and (max-width: 840px) { // Diminuir H2, nav e campo de busca // Formatação de data simples}
@media screen and (max-width: 767px) { // Uma coluna ao invés de duas}
![Page 60: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/60.jpg)
The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
Retina Display
![Page 61: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/61.jpg)
16 x 1 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 1
32 x 2 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 2
Normal displays
“Retina” displays
![Page 62: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/62.jpg)
Display: Mostra physical pixels
CSS: Interpreta virtual pixels
![Page 63: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/63.jpg)
Physical Pixels: Imagens 4x maiores (2x width / 2x height)
Virtual Pixels: Dimensões virtuais, imagens redimensionadas
![Page 64: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/64.jpg)
240px
57px
![Page 65: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/65.jpg)
sprite.png
130px
260px
Normal display
![Page 66: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/66.jpg)
#site-header h1 a { display: block; width: 240px; height: 57px; background-image: url(../images/sprite.png); background-repeat: no-repeat; background-position: -10px -10px; overflow: hidden; text-indent: 100%; white-space: nowrap;}
Normal display
![Page 68: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/68.jpg)
@media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/[email protected]); background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 50% 50%; /* Dimensionando os Physical */ -moz-background-size: 50% 50%; /* Pixels da imagem para os */ -ms-background-size: 50% 50%; /* Virtual Pixels do browser */ -o-background-size: 50% 50%; background-size: 50% 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; }}
“Retina” display
![Page 69: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/69.jpg)
@media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { background-image: url(../images/[email protected]); -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -ms-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; }}
“Retina” display
![Page 70: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/70.jpg)
Responsive Images
![Page 71: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/71.jpg)
![Page 72: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/72.jpg)
3008 x 2000
![Page 73: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/73.jpg)
FAIL
![Page 74: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/74.jpg)
![Page 75: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/75.jpg)
<div data-picture data-alt="A beautiful kitty"> <div data-src="jamie_small.jpg"></div> <div data-src="jamie_medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="jamie_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="jamie_extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/jamie_small.jpg" alt="A beautiful kitty"> </noscript></div>
![Page 76: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/76.jpg)
HiSRCUsa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img>https://github.com/teleject/hisrc
Adaptive ImagesServer-side, usa .htaccess e PHPhttp://code.google.com/p/css3-mediaqueries-js/
PicturefillUsa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images (tag <picture>)https://github.com/scottjehl/picturefill
OutrosO Chris Coyier, do CSS-Tricks, fez um excelente comparativo entre as diferentes técnicas (link em inglês)http://css-tricks.com/which-responsive-images-solution-should-you-use/
Responsive Images
![Page 77: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/77.jpg)
Nenhuma Media Query funciona no IE6–8 sem plugin. =/
WARNING
![Page 78: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/78.jpg)
Fallback para IE
![Page 79: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/79.jpg)
![Page 80: Responsive Web Design e a Ubiquidade da Web](https://reader036.fdocument.pub/reader036/viewer/2022062319/5555c858d8b42a711f8b4609/html5/thumbnails/80.jpg)