Lab#13 responsive web design
Transcript of Lab#13 responsive web design
![Page 1: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/1.jpg)
LAB#12 Responsive Web Design322432 Web Design Technology
![Page 2: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/2.jpg)
มารู้��จั�กก�บ Responsive Web Design
![Page 3: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/3.jpg)
![Page 4: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/4.jpg)
ขั้��นตอนการู้ทำ�า Responsive Web Design
• ออกแบบให้�เรียบง่ าย• เรี��มที่�ห้น้�าจอเล็�กสุ�ดเสุมอ• ก�าห้น้ดขน้าดแบบ Relative
Fluid Layouts (%)• ห้า Breakpoints แล็�วเขยน้
Media Queries• ก�าห้น้ด Meta Viewport • เช็�คก บ Device
![Page 5: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/5.jpg)
ออกแบบให้�เรู้�ยบง่�าย
![Page 6: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/6.jpg)
• เรู้��มทำ��ห้น�าจัอเล็�กสุ�ดเสุมอ
![Page 7: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/7.jpg)
• ก�าห้นดขั้นาดแบบ Relative Fluid Layouts (%)
Example http://learn.shayhowe.com/advanced-html-css/responsive-web-design
![Page 8: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/8.jpg)
ห้า Breakpoints แล็�วเขั้�ยน
Media Queries
![Page 9: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/9.jpg)
ก�าห้นด Meta Viewport
![Page 10: Lab#13 responsive web design](https://reader034.fdocuments.us/reader034/viewer/2022052618/55490728b4c90558458b5e90/html5/thumbnails/10.jpg)
Example
@media screen and (min-width: 800px) and (max-width: 1200px) { .test { font-size: 14pt; } }
http://www.designil.com/what-is-responsive-web-design-1.html
@media screen and (กฏ 1) and (กฏ 2) and ... { /* CSS ที่�ต้�อง่การีใสุ ถ้�าเครี$�อง่ต้รีง่ต้ามกฏด�าน้บน้ */ }