ในบางครั้งที่ 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>

•