Munu

กำหนด Layout ตามขนาดหน้าจอ

หน้าแรก » ข่าวสาร » กำหนด Layout ตามขนาดหน้าจอ

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

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com