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