FLEXIBLE WIREFRAME TOOL | cssarray.office-london.net



VIEW WEBSITE LAYOUT ON VARIOUS MONITOR SCREEN, TABLET & MOBILE DISPLAY SIZES



*** USE THIS TOOL ON FULL-SIZE DESKTOP MONITOR ONLY - SET BROWSER WINDOW TO MAXIMUM SIZE ***



Stylesheets @ breakpoints



1. Universal stylesheet, no relevance to dimensions & layout:

"style.css"



2. DESKTOP STYLESHEET 1280px+ - build for minimum 1280px width, flex wider to 1920px max.:

"desktop.css" | "@media screen (min-width: 1280px)"



3. TABLET @ LANDSCAPE ORIENTATION / SMALL LAPTOP STYLESHEET 800px - 1279px - build for 800px width, flex wider to 1279px max.:

"tablet-landscape.css" | "@media screen and (max-width: 1279px) and (min-width: 800px)"



4. TABLET @ PORTRAIT ORIENTATION / MOBILE STYLESHEET 600px - 799px | Build for 600px width, flex wider to 779px max.:

"tablet-portrait.css" | "@media screen and (max-width: 799px) and (min-width 600px)"



5. COMPACT MOBILE STYLESHEET 320px - 599px | Build for 320px width, flex wider to 599px max.:

"mobile.css" | "@media screen and (max-width: 599px) and (min-width: 320px)"





#

I. COMPACT MOBILE

CSS I. - 1

4" iPhone 5

CSS I. - 2

(smartphone)

CSS I. - 3

(smartphone)

CSS I. - 4

(smartphone)

CSS I. - 5

(smartphone)

CSS I. - 6

(smartphone)

CSS I. - 7

(smartphone)

CSS I. - 8

(smartphone)

CSS I. - 9

(smartphone)




#

II. TABLET @ PORTRAIT ORIENTATION / MOBILE

CSS II. - 1

(smartphone / tablet)

CSS II. - 2

(smartphone / tablet)

CSS II. - 3

4.8" Galaxy S

CSS II. - 4

9.7" iPad




#

III. TABLET @ LANDSCAPE ORIENTATION / SMALL LAPTOP

CSS III. - 1

15" monitor

CSS III. - 2

(tablet / laptop)

CSS III. - 3

(tablet / laptop)




#

IV. DESKTOP / LAPTOP

CSS IV. - 1

14" Notebook

CSS IV. - 2

19" monitor

CSS IV. - 3

14" Notebook / 15.6" Laptop / 18.5" monitor

CSS IV. - 4

19" monitor

CSS IV. - 5

(monitor)

CSS IV. - 6

20" monitor

CSS IV. - 7

22" monitor