+ All Categories
Home > Design > Webconf 2013 - Media Query 123

Webconf 2013 - Media Query 123

Date post: 25-Jun-2015
Category:
Upload: hina-chen
View: 331 times
Download: 0 times
Share this document with a friend
Popular Tags:
76
MEDIA QUERY 123 @ 閃光洽
Transcript
Page 1: Webconf 2013 - Media Query 123

MEDIA QUERY 123@ 閃光洽

Page 2: Webconf 2013 - Media Query 123

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

農夫

鐵工

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

Page 3: Webconf 2013 - Media Query 123

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

Page 4: Webconf 2013 - Media Query 123

OK, LET'S GO.

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

Page 5: Webconf 2013 - Media Query 123

MEDIA QUERY@MEDIA

Page 6: Webconf 2013 - Media Query 123

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.

Page 7: Webconf 2013 - Media Query 123

WHAT THE MEDIA QUERY FOR ?Your device.

And your devices.

Page 8: Webconf 2013 - Media Query 123

WHAT THE MEDIA QUERY NOT FOR ?Your feeling.

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

Page 9: Webconf 2013 - Media Query 123

@VIEWPORT ?ok, we talk about later.

Page 10: Webconf 2013 - Media Query 123

ABOUT @MEDIAThere are 3 way to go,

1. @media with <link> tag

2. @media with CSS

3. @media with @import

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

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

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

Page 11: Webconf 2013 - Media Query 123

@MEDIA WITH DEVICESTL;DR

We just talk about,

screen

all

not all

CSS3 Media Queries

Page 12: Webconf 2013 - Media Query 123

@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"

Page 13: Webconf 2013 - Media Query 123

@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㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�

Page 14: Webconf 2013 - Media Query 123

@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

Page 15: Webconf 2013 - Media Query 123

WHEN @MEDIA ACTUALLY WORK ?Correct device with @media

Expressions or properties matched

"not all"

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

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

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

Page 16: Webconf 2013 - Media Query 123

WE KNOWN THE MEDIA QUERY !YAY!

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

Page 17: Webconf 2013 - Media Query 123

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

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

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

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

Page 18: Webconf 2013 - Media Query 123

ALL NOT WORK, WHY?

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

Page 19: Webconf 2013 - Media Query 123

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

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

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

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

Page 20: Webconf 2013 - Media Query 123

@MEDIA AND DISPLAYDIVERSITY OF DISPLAY

Page 21: Webconf 2013 - Media Query 123

ABOUT "DISPLAY"Desktop, laptop display

Smartphone display

Retina display

All other displays

Page 22: Webconf 2013 - Media Query 123

5.6 billion users at theearly 2013.

491.4 million mobilephones at 2011.

THE CHALLENGE FROM MOBILE DEVICES

photocount.com

Page 23: Webconf 2013 - Media Query 123

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

Page 24: Webconf 2013 - Media Query 123

NOTINFINITE

BUTCLOSE

RIGHT ?Think about the Android devices.

Page 25: Webconf 2013 - Media Query 123

DENSITYDESTINY

Page 26: Webconf 2013 - Media Query 123

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

Mobile devices has lots of resolution.

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

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

Page 27: Webconf 2013 - Media Query 123

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.

Page 28: Webconf 2013 - Media Query 123

DENSITY CONVERSION

Designing (and converting) for multiple mobile densities

Page 29: Webconf 2013 - Media Query 123

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

Page 30: Webconf 2013 - Media Query 123

DEVICE-PIXEL-RATIOTL; DR

More about device-pixel-ratio

List of displays by pixel density

Page 31: Webconf 2013 - Media Query 123

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

Resolution Units

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

Viewport percentage lengthes

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

Page 32: Webconf 2013 - Media Query 123

BACK TO MEDIA QUERY@MEDIA IN THE REAL WORLD

Page 33: Webconf 2013 - Media Query 123

DESIGN FOR DIFFERENT DEVICESdifferent devices = different widths

start with browser if possible

wide or narrow

retrofit existing design

content first

Page 34: Webconf 2013 - Media Query 123

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

Page 35: Webconf 2013 - Media Query 123

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

Page 36: Webconf 2013 - Media Query 123

WHAT IS YOUR CHOOSE ?

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

Page 37: Webconf 2013 - Media Query 123

320x480

WE START WITH MOBILE STYLESNarrow width

Page 38: Webconf 2013 - Media Query 123

1280x900

WE START WITH MOBILE STYLESWide width

Page 39: Webconf 2013 - Media Query 123

320x480

WE START WITH MOBILE STYLESNarrow width

Page 40: Webconf 2013 - Media Query 123

1280x900

WE START WITH MOBILE STYLESWide width

Page 41: Webconf 2013 - Media Query 123

WHAT'S QUERY WE HAVE ?

total 105 lines in SASS

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

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

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

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

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

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

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

Page 42: Webconf 2013 - Media Query 123

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

Page 43: Webconf 2013 - Media Query 123

THE BOOTSTRAP WAY

Responsive Media Query Quick Reference

Page 44: Webconf 2013 - Media Query 123

LOOK AGAIN OUR QUERIES,Bootstrap use,

We have,

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

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

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

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

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

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

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

Page 45: Webconf 2013 - Media Query 123

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

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

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

Page 46: Webconf 2013 - Media Query 123

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

Page 47: Webconf 2013 - Media Query 123

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

Page 48: Webconf 2013 - Media Query 123

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.

Page 49: Webconf 2013 - Media Query 123

SIMPLEis fucking

HARD

Page 50: Webconf 2013 - Media Query 123

OH!!!ABOUT @VIEWPORT

Page 51: Webconf 2013 - Media Query 123

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.

Page 52: Webconf 2013 - Media Query 123

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".

Page 53: Webconf 2013 - Media Query 123

WHY WE LEARN ABOUT @VIEWPORT ?TL; DR

A tale of two viewports — part two

w3c, css device adaptation

Page 54: Webconf 2013 - Media Query 123

I DO NOT WANT TO LEARN.

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

Page 55: Webconf 2013 - Media Query 123

OK, JUST COPY AND PASTEhtml5-boilerplate

or this one,

or this one,

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

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

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

Page 56: Webconf 2013 - Media Query 123

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

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

Page 57: Webconf 2013 - Media Query 123

LITTLE QUIZWOULD YOU REALLY KNOW ABOUT @MEDIA ?

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

Page 58: Webconf 2013 - Media Query 123

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

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

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

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

Page 59: Webconf 2013 - Media Query 123

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

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

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

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

Page 60: Webconf 2013 - Media Query 123

ANSWERQ1:

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

Q2:

all does not work.

Page 61: Webconf 2013 - Media Query 123

YOUR ANSWER IS ALL WRONG ?

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

Page 62: Webconf 2013 - Media Query 123

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

width, height

initial-scale

minimum-scale, maximum-scale

user-scalable

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

Page 63: Webconf 2013 - Media Query 123

@VIEWPORT IN CSSCSS Device Adaptation

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

Page 64: Webconf 2013 - Media Query 123

@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"

Page 65: Webconf 2013 - Media Query 123

WTF !

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

Page 66: Webconf 2013 - Media Query 123

@VIEWPORT IN REAL WORLDvisual and layout viewport

A tale of two viewports — part two

Page 67: Webconf 2013 - Media Query 123

@VIEWPORT IN REAL WORLDvisual viewport = layout viewport

A tale of two viewports — part two

Page 68: Webconf 2013 - Media Query 123

SO, JUST COPY AND PASTEhtml5-boilerplate

or this one,

or this one,

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

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

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

Page 69: Webconf 2013 - Media Query 123

RESPONSIVE WEB DESIGN@VIEWPORT + @MEDIA

Page 70: Webconf 2013 - Media Query 123

RWD AND @MEDIAMaybe you think,

The way we use,

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

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

Page 71: Webconf 2013 - Media Query 123

RWD AND @MEDIAWhich dimension as starting point ?

Where and how to make breaking points ?

How to test against media features ?

Non-supporting browsers.

Page 72: Webconf 2013 - Media Query 123

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

Page 73: Webconf 2013 - Media Query 123

RE-THINK ABOUT THE WEB DESIGNA Dao of Web Design

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

Page 74: Webconf 2013 - Media Query 123

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.

Page 75: Webconf 2013 - Media Query 123

QUESTION :) ?


Recommended