LAB#12 Responsive Web Design322432 Web Design Technology

มารู้��จั�กก�บ Responsive Web Design

ขั้��นตอนการู้ทำ�า Responsive Web Design

• ออกแบบให้�เรียบง่ าย• เรี��มที่�ห้น้�าจอเล็�กสุ�ดเสุมอ• ก�าห้น้ดขน้าดแบบ Relative

Fluid Layouts (%)• ห้า Breakpoints แล็�วเขยน้

Media Queries• ก�าห้น้ด Meta Viewport • เช็�คก บ Device

ออกแบบให้�เรู้�ยบง่�าย

• เรู้��มทำ��ห้น�าจัอเล็�กสุ�ดเสุมอ

• ก�าห้นดขั้นาดแบบ Relative Fluid Layouts (%)

Example http://learn.shayhowe.com/advanced-html-css/responsive-web-design

ห้า Breakpoints แล็�วเขั้�ยน

Media Queries

ก�าห้นด Meta Viewport

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 ที่�ต้�อง่การีใสุ ถ้�าเครี$�อง่ต้รีง่ต้ามกฏด�าน้บน้ */ }