การสร้างเว็บเพจแบบ Responsive Design

หลังจากที่ได้อ่านบทความ ‘Responsive Web Design คืออะไร?’ ซึ่งเกรินนำเกี่ยวกับหลักการสร้างเว็บไซต์ให้เป็น Responsive ครั้งนี้เราจะมาทำ Workshop วิธีการทำกันบ้างนะครับ โดยผมได้เขียน HTML , CSS , javascript ให้อยู่ในหน้าเดียวกันเลย โดยทำ Breakpoint ขนาดแสดงผลไว้ 3 รูปแบบเพื่อแสดงผลกับ หน้าจอคอมพิวเตอร์ , แท็บเล็ต และมือถือสมาร์ทโฟน ซึ่งการแสดงผลแบบ มือถือ จะมีข้อแตกต่างในส่วนของเมนู เอาหล่ะครับเรามีดูกัน
<!doctype html>
<html>   
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="viewport" content="initial-scale=1.0">
 
        <title>Responsive Sample</title>
 
        <style>
            html,body
            {
                background-color: #CDCDCD;
                margin: 0px;
                padding: 0px;  
            }
            html,body,div
            {
                font-family: 'Arial',Tahoma,Verdana;
                font-size: 1.0em;                          
                color: #000;
            }
            .main-wrapper
            {
                position: relative;
                display: block;
                width: 1000px;
                margin: 0px auto;
                background-color: #FFF;
            }
            .sec-header.mobile
            {
                display: none;
            }
            .sec-header
            {
                display: block;
                position: relative;
            }
            .sec-header ul
            {              
                margin: 0;
                padding: 0;
                list-style: none;
                background-color: #000;
            }
            .sec-header ul li
            {
                display: inline-block;
            }
            .sec-header ul li a
            {
                display: block;
                font-weight: bold;
                line-height: 3em;
                color: #FFF;
                text-decoration: none;
                padding: 0px 10px;
            }
            .sec-header ul li a:hover
            {
                background-color: #555555;
            }
            .sec-content
            {
                display: block;
                position: relative;
            }
 
            .sec-content .row
            {
                display: block;
                position: relative;
            }
            .sec-content .row div:first-child
            {
                float: left;
                width: 490px;
                margin: 0px 20px 0px 0px;
                padding: 10px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
            .sec-content .row div:first-child+div
            {
                float: right;
                width: 490px;
                margin: 0px;
                padding: 10px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
            .sec-footer
            {
                position: relative;
                display: block;
                width: 100%;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                padding: 10px;
                font-size: 0.8em;
            }
            h3
            {
                position: relative;
                display: block;
                margin: 0;
                padding: 0px 0px 10px 0px;
                font-size: 1.3em;
                font-weight: bold;
                line-height: 1.3em;
            }
            .text-justify
            {
                text-align: justify;
                line-height: 1.3em;
                margin: 0;
                padding: 0;
            }
            .clear
            {
                clear: both;
            }
 
            @media screen and (max-width: 1000px) and (min-width: 799px)
            {
                .main-wrapper
                {
                    width: 800px;
                }
                .sec-content .row div:first-child
                {
                    width: 390px;
                }
                .sec-content .row div:first-child+div
                {
                    width: 390px;                  
                }
            }
 
            @media screen and (max-width: 800px)
            {
                .main-wrapper
                {
                    width: 100%;
                }
                .sec-content .row div:first-child
                {
                    float: none;
                    width: 100%;
                }
                .sec-content .row div:first-child+div
                {
                    float: none;
                    width: 100%;
                }
                .sec-header.desktop
                {
                    display: none;
                }
                .sec-header.mobile
                {
                    position: fixed;
                    display: block;
                    width: 100%;
                    height: 48px;
                    z-index: 10;
                    top: 0;
                    background-color: #000;
                }
                .sec-header.mobile ul
                {
                    position: fixed;
                    width: 100%;
                    top: 48px;
                    overflow: hidden;
                }
                .sec-header.mobile ul li
                {
                    display: block;
                }
                .sec-content
                {
                    margin-top: 48px;
                }
                .menu-icon
                {
                    display: inline-block;
                    margin: 5px 0px 0px 10px;
                    padding: 0px 30px;
                    height: 30px;
                    background-color: #FF0000;
                    line-height: 30px;
                    text-align: center;
                    color: #FFF;
                    font-weight: bold;
                    border: #B70000 2px solid;
                    cursor: pointer;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
            }
        </style>
        <script language="javascript" type="text/javascript" src="jquery-1.7.min.js"></script>
    </head>
    <body>
        <div class="main-wrapper">
            <div class="sec-header mobile">
                <div class="menu-icon">Expand Menu</div>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About US</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Sitemap</a></li>
                    <li><a href="#">Contact US</a></li>
                </ul>
            </div>
            <div class="sec-header desktop">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About US</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Sitemap</a></li>
                    <li><a href="#">Contact US</a></li>
                </ul>
            </div>
            <div class="sec-content">
                <div class="row">
                    <div>
                        <h3>Left Content</h3>
                        <p class="text-justify">I once did an interview for the Banbury Herald. I must look it out one of these days, for the biography. Strange chap they sent me. A boy, really. As tall as a man, but with the puppy fat of youth. Awkward in his new suit. The suit was brown and ugly and meant for a much older man. The collar, the cut, the fabric, all wrong. It was the kind of thing a mother might buy for a boy leaving school for his first job, imagining that her child will somehow grow into it. But boys do not leave their boyhood behind when they leave off their school uniform.</p>
                    </div>
                    <div>
                        <h3>Right Content</h3>
                        <p class="text-justify">My gripe is not with lovers of the truth but with truth herself. What succor, what consolation is there in truth, compared to a story? What good is truth, at midnight, in the dark, when the wind is roaring like a bear in the chimney? When the lightning strikes shadows on the bedroom wall and the rain taps at the window with its long fingernails? No. When fear and cold make a statue of you in your bed, don't expect hard-boned and fleshless truth to come running to your aid. What you need are the plump comforts of a story. The soothing, rocking safety of a lie.</p>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="sec-footer">
                © copyright 2014 - mywebsite.com
            </div>
        </div>
        <script language="javascript">
        var initHeight,toggle;
        $(function(){
            initHeight=243;
            toggle=false;
 
            $('.sec-header.mobile ul').css({'height':'0px'});
            $('.menu-icon').click(function(e){
                e.preventDefault();
                toggle=!toggle;
                if(toggle){
                    $('.sec-header.mobile ul').animate({ 
                      height: initHeight+'px' 
                     }, 400);
                     $('.menu-icon').html("Close Menu");
                }else{
                    $('.sec-header.mobile ul').animate({ 
                      height: '0px' 
                     }, 400);
                     $('.menu-icon').html("Expand Menu");
                }
            });
        });
        </script>
    </body>
</html>
โค๊ดส่วนนี้ผมได้ทำการบันทึกไฟล์ว่า index.html นะครับ หรือจะบันทึกเป็นชื่ออื่นก็ได้ครับเอาไปประยุกต์ใช้กัน เพราะว่าในตัวอย่างจะไม่มีส่วนการทำงานของ php เลยครับ ทีนี้เรามาดูทีละส่วนนะครับการกำหนด meta tag
<meta name="viewport" content="width=device-width"> // การกำหนดขนาดหน้าเว็บให้ปรับขนาดตามความละเอียดหน้าจอสำหรับมือถือและแท็บเล็ต และทำให้เว็บไซต์ไม่สามารถซูมเข้า - ออกได้ เพราะขนาดได้ปรับตามหน้าจอแล้ว
<meta name="viewport" content="initial-scale=1.0"> // การกำหนดขนาด scale ของชิ้นงานให้เท่ากับ 1 เท่าของหน้าจอสำหรับมือถือและแท็บเล็ต
การกำหนด Breakpoint(CSS)
  • 1  ผมได้กำหนด breakpoint 3 จุดครับ โดยใช้ CSS @media screen โดยส่วนที่ไม่ได้กำหนด @media คือขนาดมาตรฐานหน้าจอสำหรับคอมพิวเตอร์ครับ
  • 2  @media screen and (max-width: 1000px) and (min-width: 799px) ผมได้กำหนดให้ขนาดมากกว่า 800px แต่ไม่เกิน 1000px เพื่อการแสดงผลลงไปใน tablet โดยกำหนดหนาดความกว้างงานเท่ากับ 800px
  • 3  @media screen and (max-width: 800px) คือขนาดหน้าจอที่ไม่เกิน 800px ผมได้กำหนดให้เป็นการแสดงผลแบบ มือถือ ทั้งหมดเลยครับ ในส่วนนี้ผมได้ใส่รายละเอียด css ในส่วนของเมนูด้านบนซึ่งจะแสดงผลแตกต่างกับแบบปกติครับ

การสร้างเมนู ในเมนูนะครับ ได้แบ่งเมนูออกเป็น 2 ส่วน คือแบบ mobile กับแบบ desktop ถ้าหน้าจอเป็นแบบ คอมพิวเตอร์ หรือ แท็บเล็ต ส่วนของ mobile ก็จะถูกซ่อนไว้ด้วย CSS แต่ถ้าหน้าจอเป็นแบบ มือถือ CSS ส่วน mobile ก็จะแสดงและส่วนของ desktop ก็จะซ่อนไว้ครับ เพราะเมนูมันแตกต่างกันคือแบบ desktop แสดงผลในแนวนอน และ mobile แสดงผลในแนวตั้งพร้อมทั้งสามารถซ่อนแสดงผลได้ด้วยปุ่ม ผมใช้ javascript กำหนดไว้ครับ การกำหนด

 
การซ่อนแสดงเมนูของมือถือด้วย javascript
<script language="javascript">
var initHeight,toggle;
$(function(){
    initHeight=243;
    toggle=false;
 
    $('.sec-header.mobile ul').css({'height':'0px'});
    $('.menu-icon').click(function(e){
        e.preventDefault();
        toggle=!toggle;
        if(toggle){
            $('.sec-header.mobile ul').animate({ 
              height: initHeight+'px' 
             }, 400);
             $('.menu-icon').html("Close Menu");
        }else{
            $('.sec-header.mobile ul').animate({ 
              height: '0px' 
             }, 400);
             $('.menu-icon').html("Expand Menu");
        }
    });
});
</script>
ในส่วนสคริปนี้ผมใช้ jQuery ในการช่วยสร้าง javascript ครับซึ่งสามารถหาโหลดได้ ที่นี่ โดยจะเป็นการกำหนดการซ่อน แสดงผลเมนูสำหรับส่วนมือถือครับ โดยตัวแปล initHeight คือการกำหนดความสูงของเมนูซึ่งถ้าเราเพิ่ม หรือ ลบ เมนูอาจจะต้องมาเปลี่ยนแปลงค่าในตัวแปลนี้นะครับ แนะนำให้ใช้ Developer Tools ในการ Debug ถ้าเราอยากกำหนด css ในรูปแบบต่างๆโดยที่ยังไม่ต้องไปแก้ไขไฟล์ขอแนะนำให้นักพัฒนาลองไปดูในส่วนของ Developer tools นะครับโดยแต่ละ Browser จะมี Developer tool มาให้เช่น Chrome ลองกด f12 ดูครับ จะมีหน้าต่าง developer tool ซึ่งเป็นประโยชน์มาก และ firefox จะมี firebug ซึ่งต้องติดตั้งส่วนเสริมมาก่อนครับ ยังไงบทความหน้าจะมาอธิบาย developer tool ให้ดูกันนะครับ
 
บทสรุป
ก็จบเท่านี้นะครับสำหรับ Workshop การทำเว็บแบบ Responsive นักพัฒนาลองเอาตัวอย่างนี้ไปขึ้นเว็บจริงๆ แล้วลองเอามือถือ หรือเท็บเล็ตมาลองเปิดดูครับก็จะเห็นผลลัพท์ตามที่ต้องการดังภาพ หรืออาจจะใช้ Browser จำลองอุปกรณ์มาแสดงผลดู หรือไม่ก็ลองย่อ – ขยายหน้าจอ Browser ก็ได้ครับ ขอให้สนุกกับการเขียนโปรแกรมครับ /iBoy
ความคิดเห็น
(มีผู้เข้าชม 5,247 ครั้ง, 1 ผู้เข้าชมในวันนี้)

Related posts