Webconf 2013 - Media Query 123

Post on 25-Jun-2015

331 views 0 download

Tags:

transcript

MEDIA QUERY 123@ 閃光洽

ABOUT MEHina Chen, a.k.a. 閃光洽

農夫

鐵工

居家修繕http://blog.hinablue.me

BEFORE WE START...You should know about,

WebConf@2013 ROCK!!!

Baby don't go if you're in the wrong session.

Do not loudly if you have been reading the slide.

Do not snore if you are asleep.

Thank you all for join this session!

http://webconf.hinablue.me/2013

OK, LET'S GO.

http://www.flickr.com/photos/npobre/2601582256/

MEDIA QUERY@MEDIA

WHAT IS MEDIA QUERY ?CSS3 bring awesome new part!

Vary simple way to feed different CSS based oncharacteristic users' device.

Make us to re-think about "device".

Maybe easy to retrofix existing design.

WHAT THE MEDIA QUERY FOR ?Your device.

And your devices.

WHAT THE MEDIA QUERY NOT FOR ?Your feeling.

NOT based on browser.Yes, it just based on @viewport size.

@VIEWPORT ?ok, we talk about later.

ABOUT @MEDIAThere are 3 way to go,

1. @media with <link> tag

2. @media with CSS

3. @media with @import

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫕�㫕�㫕�㫔�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�

@MEDIA WITH DEVICESTL;DR

We just talk about,

screen

all

not all

CSS3 Media Queries

@MEDIA EXPRESSIONSscreen and ( max-width: 480px )

only screen and ( max-width: 768px )

not screen and ( max-width: 1024px )

screen, projection

unknown value will equal to "not all"

@MEDIA PROPERTIES1. width, height, device-width, device-height

2. orientation, aspect-ratio, device-aspect-ratio

3. color, color-index, monochrome

4. resolution, scan (only for tv media), grid

5. max-, min- prefix㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�

@MEDIA PROPERTIES UNITwidth, height use px, pt, pc, cm, mm, in

ratio use width/height, ie. 1024/768, 16/9

color, monochrome use number, ie. 1, 2, 3... etc.

resolution use dpi, dpcm

orientation only portrait and landscape are validvalue

scan only progressive and interlace are valid value

grid only 0 and 1 are vaild value

WHEN @MEDIA ACTUALLY WORK ?Correct device with @media

Expressions or properties matched

"not all"

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�

WE KNOWN THE MEDIA QUERY !YAY!

http://www.flickr.com/photos/t0msk/4109452525/

OK, TRY TO EXPLAIN THIS,㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫘�

ALL NOT WORK, WHY?

http://www.flickr.com/photos/mpilote/3304961453/

IDENTIFY THE WRONG,㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫘�㫕�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫖�㫗�㫗�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�

㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫘�

@MEDIA AND DISPLAYDIVERSITY OF DISPLAY

ABOUT "DISPLAY"Desktop, laptop display

Smartphone display

Retina display

All other displays

5.6 billion users at theearly 2013.

491.4 million mobilephones at 2011.

THE CHALLENGE FROM MOBILE DEVICES

photocount.com

HOW MANY DISPLAY RESOLUTION WEMUST CONSIDER ?List of displays by pixel density

NOTINFINITE

BUTCLOSE

RIGHT ?Think about the Android devices.

DENSITYDESTINY

WHY WE TALK ABOUT DENSITY ?@media work based on @viewport rule.

Mobile devices has lots of resolution.

㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫕�㫕�㫕�㫔�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫗�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�

WHY WE CONSIDER THE DENSITY ?In the mobile device (ie. iPhone4), screen resolution is640x960 that specification say so. So, can we use @media( max-width: 640px ) to do our job?

NO. You should use @media ( max-width: 320px ) causethe device-pixel-ratio is 2.

DENSITY CONVERSION

Designing (and converting) for multiple mobile densities

As an example, if your page had an image that was 100pxby 100px, you'd provide an image that was 200px by200px, but specify in CSS or as an attribute in HTML thatit is 100px by 100px.

The reason this works is that a pixel on the screen is notthe same as a CSS pixel. This is a good thing, becauseotherwise as I say, things would be tiny.

--Rich Bradshaw

”Pixel density, retina display and font-size in CSS

DEVICE-PIXEL-RATIOTL; DR

More about device-pixel-ratio

List of displays by pixel density

I DON'T WANT TO DO MATH !Use "dppx", "vw", "vh"

Resolution Units

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫘�㫘�㫘�㫕�

Viewport percentage lengthes

㫕�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫕�㫘�㫘�㫕�

BACK TO MEDIA QUERY@MEDIA IN THE REAL WORLD

DESIGN FOR DIFFERENT DEVICESdifferent devices = different widths

start with browser if possible

wide or narrow

retrofit existing design

content first

START WITH DESKTOP STYLESGood parts

Easy to start or retrofit existing design

IE 6-8 may work correctly without extra work

OtherwiseRequests Javascript or style to support mobiledesign in IE Mobile or other mobile browsers

START WITH MOBILE STYLESGood parts

Non-support media query browsers still get themobile style

Mobile device will not downloading unneededdesktop style

OtherwiseRequests Javascript or style to support IE 6-8 tomake it work correctly

WHAT IS YOUR CHOOSE ?

http://www.flickr.com/photos/marfis75/8031936764/

320x480

WE START WITH MOBILE STYLESNarrow width

1280x900

WE START WITH MOBILE STYLESWide width

320x480

WE START WITH MOBILE STYLESNarrow width

1280x900

WE START WITH MOBILE STYLESWide width

WHAT'S QUERY WE HAVE ?

total 105 lines in SASS

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

WHY OUR QUERIES SO ODDLY ?WHY SO MANY MEDIA QUERY WE USED ?

THE BOOTSTRAP WAY

Responsive Media Query Quick Reference

LOOK AGAIN OUR QUERIES,Bootstrap use,

We have,

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�

THE QUERY REALLY DO IS...Make special size of your elements to fit the layout.

㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫕�

㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫔�㫕�㫕�㫕�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫗�㫖�㫕�㫔�㫘�㫘�㫘�㫔�㫗�㫖�㫖�㫗�㫔�㫕�㫗�㫗�㫗�㫖�㫕�㫔�㫕�㫕�㫘�

SPECIAL WE USED㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�

SPECIAL WE USED㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�

START WITH DESKTOP STYLES ?Actually, we tried, and we failed.

Retrofit existing design is too difficult.

Original design is NOT content first.

Visual design cannot reuse in the narrow styles.

Alomst overwriting all the style we have.

Vary hard to fine tune in the mobile device.

We do REALLY not want to test Android devices.

SIMPLEis fucking

HARD

OH!!!ABOUT @VIEWPORT

WHAT IS @VIEWPORT ?show your layout in the viewable area.

zoom in/out your layout with client behavior.

fit some rules with the device.

@media depends on @viewport size.

WHAT THE @VIEWPORT DO ?initial viewport

Initial some properties which the device really haveand IT IS READ-ONLY. In the other word, it called"visual viewport".

actual viewport

After initial viewport, this is the rules you setting inthe viewport, in the other word, it called "layoutviewport".

WHY WE LEARN ABOUT @VIEWPORT ?TL; DR

A tale of two viewports — part two

w3c, css device adaptation

I DO NOT WANT TO LEARN.

http://www.flickr.com/photos/jdblundell/3324932274/

OK, JUST COPY AND PASTEhtml5-boilerplate

or this one,

or this one,

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫕�㫔�㫕�

AND DO NOT ASK ME WHY !GOOGLE IT, PLEASE.

http://www.flickr.com/photos/lassi_kurkijarvi/3456993824/

LITTLE QUIZWOULD YOU REALLY KNOW ABOUT @MEDIA ?

http://www.flickr.com/photos/albertogp123/5843577306/

Q1: WHICH @MEDIA WILL WORK ?㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

Q2: WHICH @MEDIA WILL WORK ?㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�

ANSWERQ1:

narrow style will work, wide style will overwrite if thesame properties occur.

Q2:

all does not work.

YOUR ANSWER IS ALL WRONG ?

http://www.flickr.com/photos/proimos/4199675334/

LOOK AGAIN @VIEWPORT PROPERTIESThose can work with <meta> tag,

width, height

initial-scale

minimum-scale, maximum-scale

user-scalable

target-densityDpi㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�

@VIEWPORT IN CSSCSS Device Adaptation

㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫘�㫕�㫘�

@VIEWPORT, @MEDIA AND JSFor example, use the iPhone4,

@viewport use 480px

@media ( max-width: 480px ) will work

"device-width" in the @media told me "320px"

㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘� told me

"480px"

㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘� told me "320px"

WTF !

http://www.flickr.com/photos/jannemei/1023015396/

@VIEWPORT IN REAL WORLDvisual and layout viewport

A tale of two viewports — part two

@VIEWPORT IN REAL WORLDvisual viewport = layout viewport

A tale of two viewports — part two

SO, JUST COPY AND PASTEhtml5-boilerplate

or this one,

or this one,

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫕�

㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫕�㫔�㫕�

RESPONSIVE WEB DESIGN@VIEWPORT + @MEDIA

RWD AND @MEDIAMaybe you think,

The way we use,

㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�

㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�

RWD AND @MEDIAWhich dimension as starting point ?

Where and how to make breaking points ?

How to test against media features ?

Non-supporting browsers.

The choice is not between using media queries andcreating a dedicated mobile site; the choice is betweenusing media queries and doing nothing at all.

That said, in many situations the content you want toserve up will be the same regardless of context.

--Jeremy Keith

”A responsive mind

RE-THINK ABOUT THE WEB DESIGNA Dao of Web Design

http://www.flickr.com/photos/tahini/5810915356/

SUMMARY, FINALLY@media based on @viewport size.

RWD depends on media query or Javascript.

DO NOT USE strange setting with @viewport, if youdon'y know why you do.

Use the @media carefully, do the @media style once,not overwriting at all.

Think about your content again.

DO NOT fight with your visual designer.

QUESTION :) ?