Downloaded 24 times
Uploaded bySatoshi Kikuchi
Responsive Web Design HTML5勉強会
The document discusses responsive web design techniques including grid design, fluid images, media queries, liquid layouts, box-sizing, background-size properties, and libraries like imgsizr.js and Mobile Boilerplate that help make sites responsive across devices. It provides code examples for fluid grids, images, and layouts that dynamically adapt to different screen sizes.
More Related Content
![Milieu [Compatibility Mode]](https://cdn.slidesharecdn.com/ss_thumbnails/milieu-compatibility-mode-119315282046188-5-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
- 1. Responsive Web Design HTML5
- 4.
- 6. win.html android.html ie7.html win.html mac-safari.html ie6.html ie8.html iphone.html opera.html
- 7. win.html android.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
- 8. win.html android.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
- 9.
- 10.
- 11.
- 12.
- 13.
- 18.
- 19. TV in thebath
- 20.
- 22.
- 33. I’ve always thoughtof myself as an 80 percenter. I like to throw myself passionately into a sport or activity until I reach 80 percent proficiency level. To go beyond that requires an obsession and degree of specialization that doesn’t appeal to me. 80 percenter
- 34.
- 35.
- 36.
- 38.
- 39.
- 40. Responsive Web Design • Grid Design
- 41. Responsive Web Design • Grid Design • Fluid Image
- 42. Responsive Web Design • Grid Design • Fluid Image • Media Query
- 43.
- 44.
- 46.
- 47. Liquid Layout body {width : 960px} #main { width : 576px} #sub { width : 384px}
- 48. Liquid Layout body {width : 93.75%} #main { width : 60%} #sub { width : 40%}
- 49. Liquid Layout body {width : 93.75%} #main { width : 60%} #sub { width : 40%}
- 50. Liquid Layout body {width : 93.75%} #main { width : 60%} #sub { width : 40%}
- 51. Liquid Layout body {width : 93.75%} #main { width : 60%} #sub { width : 40%}
- 52.
- 54. Fluid Image img {max-width : 100%} .ie6 img { width : 100%}
- 55.
- 56.
- 58. box-sizing nav ul lia { display : block; width : 25%; border : 1px solid black; }
- 59. box-sizing nav ul lia { display : block; width : 25%; border : 1px solid black; }
- 60. box-sizing nav ul lia { display : block; width : 25%; border : 1px solid black; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box }
- 61.
- 62. background-size body { -webkit-background-size :cover; background-size : cover} body { -webkit-background-size : contain; background-size : contain}
- 63. background-size body { -webkit-background-size :cover; background-size : cover} body { -webkit-background-size : contain; background-size : contain}
- 64. background-size body { -webkit-background-size :cover; background-size : cover} body { -webkit-background-size : contain; background-size : contain}
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 89.
- 90.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n