26. SEGÚN ETHAN MARCOTTE,
RESPONSIVE WEB DESIGN ES:
“A FLEXIBLE GRID (WITH FLEXIBLE IMAGES)
THAT INCORPORATES MEDIA QUERIES TO CREATE A
RESPONSIVE, ADAPTIVE LAYOUT.”
27.
28.
29.
30. SEGÚN EL PROPIO ETHAN
ESTÁ INSPIRADO EN EL CONCEPTO DE “RESPONSIVE ARCHITECTURE”
53. EL TAMAÑO IMPORTA
• CADA DISPOSITIVO TIENE UN “DISPLAY AREA” Y UN
“RENDERING SURFACE”.
• LA VENTANA DEL NAVEGADOR ES LA “DISPLAY
AREA”; LA PANTALLA COMPLETA REPRESENTA LA
“RENDERING SURFACE”.
55. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..
56. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..
• RENDERING SURFACE = 1200PX
57. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..
• RENDERING SURFACE = 1200PX
• DISPLAY AREA (VIEWPORT) = 600PX
62. IDENTIFICAR PUNTOS DE RUPTURA
@media screen and (max-width: 1050px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 320px) {}
70. GRACIAS. PREGUNTAS?
“THE WAY IS SHAPED BY USE,
BUT THEN THE SHAPE IS LOST.
DO NOT HOLD FAST TO SHAPES BUT
LET SENSATION FLOW INTO THE
WORLD AS A RIVER COURSES DOWN
TO THE SEA.—DAO DE JING, SECTION
32, “SHAPES”
Notes de l'éditeur
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN?\n\nNot as complicated as that looks.\n
\n
1024 px #container auto margin to center, some box shadow\n\n620px Header\n\n360px navigation\n\n730px content\n\n250px side bar \n\nnumerous padding & margins\n
The first thing that we’re going to be doing is creating a flexible Grid based layout.\n\nLet’s take a look at our example file. http://dev.justinavery.me/design/fixed/\n
You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n
1024 px #container auto margin to center, some box shadow\n\n620px Header\n\n360px navigation\n\n730px content\n\n250px side bar \n\nnumerous padding & margins\n
You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n\n360px navigation\n\n730px content\n\n250px side bar \n
You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n\n360px navigation\n\n730px content\n\n250px side bar \n
\n
\n
\n
\n
\n
\n
\n
this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first.\n\nRemove the fixed width provided width= height=. this might fault.\n
this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first.\n\nRemove the fixed width provided width= height=. this might fault.\n
\n
\n
The phones started getting smarter.\n\nNot much support for “handheld”, so phone browsers sent “screen” headers by default\n
Think of a media query like a test for your browser. When a browser reads your stylesheet, the \n\nBrowser asks two questions: \n\nfirst, if it belongs to the screen media type; and if it does, \n\nif the browser’s viewport is at least 1024 pixels wide. \n\nIf the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.\n
Here are two quick guidelines that helped me sort it out:\n\nI won’t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though\n
Here are two quick guidelines that helped me sort it out:\n\nI won’t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
Visit this link for a list of queries that you can call with CSS3.\n
\n
Visit this link for a list of queries that you can call with CSS3.\n