• Responsive Web Design และการกำหนดเงื่อนไขการแสดงผลใน CSS สำหรับอุปกรณ์ที่มีขนาดต่างกัน

    หลาย ๆ คนคงได้รู้จักกันมากขึ้ันเกี่ยวกับ Responsive Web Design ให้กับเว็บไซต์ เพื่อแสดงเนื้อหาตามเครื่องมือที่ใช้ในการเข้าถึงเว็บ ไม่ว่าจะเป็น PC หรือ smartphone วันนี้เราก็เลยนำ media query สำหรับ CSS มาให้รู้กันยาว ๆ ดังนี้ /* Smartphones (portrait and landscape) ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) […]

    Read more »
  • วิธีแก้ปัญหาฟังก์ชั่น Zoom ใน Firefox

    หากไม่ได้สังเกตอะไร ก็คงจะผ่านเลยไปและไม่รู้ถึงปัญหาที่เกิดขึ้น สำหรับการใช้ฟังก์ชั่น zoom ใน css เพื่อสร้างสีสัน ให้กับเว็บไซต์ของเรา ปัญหาก็คือ zoom property ไม่สามารถใช้งานได้ใน Firefox ก็เลยต้องหาวิธีแก้ปัญหา ให้สามารถทำงานได้เหมือนกับ browser ตัวอื่น CSS Zoom property จะสามารถทำงานได้ใน IE 5.5+ Opera Safari 4 และ Chrome เท่านั้น ส่วน Firefox ตั้งแต่เวอร์ชั่น 3.5 ขึ้นไปจะใช้ -moz-transform property แทน มาดูตัวอย่างกันเลย div.mytestzoom { zoom: 1.2; /* all browsers */ -moz-transform: scale(1.2); /* Firefox */ }

    Read more »

Back to Top