ในบางครั้งที่ Layout ปกติที่ดีไซน์ออกมาเปิดสำหรับหน้าจอขนาดใหญ่จะมีรายละเอียดเยอะ มีจำนวนคอลัมน์หลายคอลัมน์ ทีนี้เวลาเราเปิดกับหน้าจอขนาดเล็กเราจึงต้องจัด Layout ซะใหม่ โดยอาจจะเรียงให้เป็นหนึ่งแถว หรือตัดส่วนข้อมูลที่ไม่จำเป็นทิ้งไป
ตัวอย่าง
แสดงผลหน้าจอขนาดปกติ 800px ขึ้นไป
แสดงผลบนหน้าจอมือถือ
live demo
หลักการ
- สร้าง CSS สำหรับใช้ร่วมกันทุก Device
- สร้าง CSS สำหรับหน้าจอขนาดใหญ่
- สร้าง CSS สำหรับหน้าจอขนาดเล็ก
- ใช้ JavaScript กำหนดเงื่อนไขใช้ CSS ตามขนาดหน้าจอ
วิธีการ
- กำหนด CSS เริ่มต้น
<title>Untitled Document</title> <link href="css/style.css" rel="stylesheet" type="text/css" id="cssDevice" /> <link href="css/base.css" rel="stylesheet" type="text/css" />
- กำหนดเงื่อนไขตามขนาดหน้าจอ
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ resizeWindow(); $(window).bind("resize", resizeWindow); function resizeWindow(){ var newWindowWidth = $(window).width(); $('#trace').text(newWindowWidth); if(newWindowWidth < 801){ //$('link[rel=stylesheet]').attr({href : "css/mobile.css"}); $('#cssDevice').attr({href : "css/mobile.css"}); }else{ //$('link[rel=stylesheet]').attr({href : "css/style.css"}); $('#cssDevice').attr({href : "css/style.css"}); } } }); </script>