กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • กำหนด font-size ใน Responsive Web Design

    April 16, 2018

    ควรกำหนด font-size โดยใช้หน่วยแบบ relative (%, em, rem) ไม่ใช่หน่วยแบบ absolute (px, pt) แต่ถึงกระนั้น การกำหนด font-size ในการทำเว็บก็ยังคงเป็นปัญหาสำหรับหลายๆ คน อยู่ดี

    ลักษณะที่เหมือนกันอย่างหนึ่งของหน่วยแบบ relative ก็คือ ค่าของมันจะขึ้นอยู่กับ element ที่เป็น parent อย่างไรก็ตาม  ทั้ง %, em, rem ก็ยังคงมีความแตกต่างกันอยู่ดี

    • Percentใช้ได้กับ property ทั่วๆ ไป อย่าง width, height, line-height รวมไปถึง font-size สมมติเรากำหนด width:50%; จะได้ว่า element นี้ จะมีความกว้างเพียงแค่ครึ่งเดียวของ element ที่เป็น parent ของมัน
    • Emคล้ายกับ % เพียงแต่ค่าของ em จะถูกนำไปเทียบกับค่า font-size ของ element ที่เป็น parent ของมันเสมอ โดย 1em จะมีค่าเท่ากับ 1เท่า หรือ 100% นั่นเอง สมมติว่าเรากำหนด font-size ของ element ที่เป็น parent ให้เป็น 15px จะได้ว่า width:10em;มีค่าเท่ากับ 15×10 = 150px อย่างไรก็ตาม เราอาจพบปัญหาหากมี element ซ้อนกันเยอะๆ เพราะ 1em ของ element หนึ่ง อาจมีค่าไม่เท่ากับ 1em ของอีก element หนึ่ง ที่อยู่คนละระดับชั้นกัน
    • Remคล้ายกับหน่วย em เพียงแต่มันจะไปเทียบขนาดกับ font-size ของ <html> เสมอ ซึ่งต่างจาก em ที่จะเทียบกับ element ที่เป็น parent ของมัน ข้อดีของการใช้ rem ก็คือ เราจะไม่เจอปัญหาเหมือนกับการใช้ em แต่การใช้ rem ก็มีข้อเสียเหมือนกันเวลานำไปใช้กับส่วนย่อยต่างๆ ภายในกล่องเนื้อหาเพราะหากเรามีการเปลี่ยน font-size ที่กล่องนั้นๆ แล้วล่ะก็ ส่วนย่อยต่างๆที่กำหนด font-size ด้วย rem ก็จะไม่เปลี่ยนขนาดตาม

    กำหนด font-size อย่างไรให้เหมาะสม ?

    จากคุณสมบัติของทั้ง 3 หน่วย ข้างต้น ทำให้เราสามารถนำมาประยุกต์ใช้ในการทำเว็บได้ดังนี้

    • 1. ใช้หน่วย % ที่ htmlจริงๆ แล้วเราจะเลือกใช้หน่วย % หรือ em ก็ได้ ที่ html แต่ที่แนะนำให้ใช้เป็น % ก็เพราะว่าจะได้ไม่มีปัญหาขนาดตัวอักษรผิดเพี้ยนใน IE เวอร์ชันเก่าๆ ส่วนสาเหตุที่ต้องมากำหนด font-size ที่ html เลยก็เพื่อที่จะรองรับการใช้หน่วย rem นั่นเอง
    • 2. ใช้หน่วย em ที่ bodyต่อมาให้เรากำหนด font-size ที่ body โดยใช้หน่วย em ในส่วนนี้ให้เรากำหนดเป็นขนาดที่เราใช้เยอะที่สุดในหน้าเว็บเพื่อที่จะลดการเขียนโค้ดให้น้อยที่สุด (หากเป็นหน่วย px ก็มักจะเป็น 13px หรือ 14px สำหรับเว็บภาษาไทย)
    • 3. ใช้หน่วย rem ที่กล่องต่างๆมาถึงจุดนี้ ตัวหนังสือทั่วๆ ไป ก็จะมีขนาดตามที่เรากำหนดไว้ที่ body สมมติว่าเราจะสร้างกล่องอะไรขึ้นมาสักกล่องหนึ่ง เช่น กล่องข่าวล่าสุด กล่องข่าวยอดนิยม หรือ กล่องค้นหา แล้วเราอยากให้กล่องดังกล่าว มีขนาดตัวหนังสือที่ต่างจาก body ให้เรากำหนด font-size ของกล่องๆ นี้ โดยใช้หน่วย rem ไม่ใช่ em เพราะเราไม่อยากมาพะวงกับปัญหาของ em หากมีการนำกล่องนี้ไปใส่ไว้ในกล่องอื่นๆ อีกที
    • 4. ใช้หน่วย em ที่ ส่วนย่อยต่างๆ ภายในกล่องสำหรับส่วนต่างๆ ภายในกล่องไม่ว่าจะเป็น header, footer หรือ p ให้เราใช้หน่วย emเสมอ เพราะขนาดของมันจะได้เทียบกับ font-size ที่เรากำหนดเอาไว้ที่ตัวกล่อง หากเราต้องการให้กล่องไหนมีตัวหนังสือใหญ่ขึ้นหรือเล็กลง เราก็แค่ปรับ font-size ของตัวกล่องนั้นๆ แล้วขนาดตัวหนังสือขององค์ประกอบต่างๆ ภายในกล่องก็จะปรับเปลี่ยนตามในสัดส่วนเดิมโดยอัตโนมัติ

    1. กำหนด font-size ที่ html ให้เป็น %

    html {
    font-size: 62.5%; /* เพื่อให้ 1rem มีค่าประมาณ 10px */
}

    การกำหนด font-size ให้เป็น 62.5%  จะทำให้การใช้หน่วย rem นั้นง่ายขึ้นมาก เพราะโดยปกติแล้ว ขนาดตัวอักษรแบบ default นั้นจะอยู่ที่ประมาณ 16px
    62.5% ของ 16px = 10px นั่นคือ 1rem  = 10px

    2. กำหนด font-size ที่ body ด้วย em

    ต่อมาให้เรากำหนด font-size ให้เป็นขนาดที่เราใช้บ่อยที่สุดในหน้าเว็บ สมมติเราชอบขนาด 14px ก็ให้เรากำหนดเป็น 1.4em ได้เลย (จริงๆ แล้วในส่วน body นี้เราจะใช้ em หรือ rem ก็ได้ แต่แนะนำให้ใช้ em เพราะจะเขียนโค้ดสั้นกว่า)

    body {
    font-size: 1.4em; /* มีค่าประมาณ 14px */
}

    สาเหตุที่ต้องกำหนด font-size ที่ body ให้ตรงตามขนาดที่เราใช้บ่อยที่สุดก็เพื่อที่จะทำให้เราเขียนโค้ดน้อยที่สุด เราจะเขียนโค้ด font-size เพิ่มอีกก็ต่อเมื่อเราต้องการตัวหนังสือในขนาดที่ต่างจากนี้เท่านั้น

    3. กำหนด font-size ที่กล่องเนื้อหาด้วย rem

    ในการกำหนดขนาดตัวหนังสือให้กับกล่องเนื้อหา ให้เราใช้หน่วย rem เสมอ โดยขนาดที่จะกำหนดนั้นให้ยึดจากขนาดของตัวหนังสือ “ปกติ” ภายในกล่องนั้นๆ เป็นหลัก เช่น เนื้อหาที่ mark up ด้วย <p> เป็นต้น สมมติว่ากล่องนี้เป็นกล่องค้นหาธรรมดาๆ ไม่ได้ต้องการให้โดดเด่นอะไร เราอาจกำหนดให้มีค่าขนาดเป็น 1.4rem เท่ากับ body ไปเลยก็ได้

    .search {
    font-size: 14px; /* กรณียังไม่รองรับ rem */
    font-size: 1.4rem;
}

    rem นั้น จะไช้ได้ตั้งแต่ IE เวอร์ชัน 9 เป็นต้นไป ดังนั้นก่อนที่จะใช้ rem ให้เราใส่ font-size ในหน่วย px เอาไว้ด้วยเสมอ แต่ถ้าใครใช้ Sass อยู่แล้ว เราก็อาจเขียน mixin ง่ายๆ ขึ้นมาช่วยก็ได้ แบบนี้

    @mixin font-size ($size) {
    font-size: $size + px; 
    font-size: ($size / 10) + rem; 
}
.search {
    @include font-size(14);
}

    แต่ถ้ากล่องที่เราจะสร้างนั้น เป็นกล่องไฮไลท์ที่เราอยากให้ตัวหนังสือมีขนาดใหญ่กว่าปกติ ก็ให้เรากำหนดขนาดที่ต้องการไปที่ตัวกล่องเหมือนเดิม

    highlight {
    font-size: 20px;
    font-size: 2.0rem;
}

    4. กำหนด font-size ที่ส่วนย่อยภายในกล่องด้วย em

    สำหรับองค์ประกอบต่างๆ ภายในกล่องเนื้อหา ให้เราใช้ em เสมอ จากตัวอย่างก่อนหน้านี้ ที่เราจะสร้างกล่องไฮไลท์ ให้เรากำหนด font-size ในส่วนของ headings, paragraph และ footer ด้วย em แบบนี้

    .highlight {
    font-size: 20px;
    font-size: 2.0rem;
}
.highlight > h2 {
    font-size: 1.5em; /* 20x1.5 = 30px */
}
.highlight > p {
    font-size: 1em; /* 20x1 = 20px */
}
.highlight > footer {
    font-size: 0.8em; /* 20x0.8 = 16px */
}

    แต่เพื่อความสะดวกในการเขียนโค้ด เราอาจสร้างสไตล์กลางๆ สำหรับกล่องเนื้อหาขึ้นมารอไว้เลย เราจะได้เขียนสไตล์เพิ่มเฉพาะเวลาที่กล่องนั้นๆ มีอะไรพิเศษจริงๆ เท่านั้น แบบนี้

    .block {
    font-size: 14px;
    font-size: 1.4rem; /* ขนาดตัวหนังสือโดยรวมของกล่อง */
}
.block > h2 {
    font-size: 1.5em; /* ใหญ่กว่าปกติครึ่งหนึ่ง */
}
.block > p {
    font-size: 1em; /* ขนาดปกติ */
}
.block > footer {
    font-size: 0.8em; /* เล็กกว่าปกติเล็กน้อย */
}

    ต่อไปนี้ เวลาเราจะสร้างกล่องอะไรขึ้นมาให้เราใส่ class “block” เอาไว้ด้วยเสมอ

    <div class="highlight block"></div>

    หากเราอยากให้ขนาดโดยรวมของกล่องนั้นมากกว่า 14px เราก็แค่เขียนสไตล์เพิ่มเข้าไปแบบนี้

    .highlight{
    font-size: 20px;
    font-size: 2.0rem;
}

    จัดการ font-size โดยรวมด้วย Sass

    หากงานของเรามีขนาดใหญ่พอสมควรหรือมีคนทำร่วมกันหลายคน เราอาจพบปัญหาเกี่ยวกับการกำหนด font-size ที่มีความหลากหลายจนควบคุมได้ลำบาก ในกรณีนี้ เราอาจใช้ Sass เข้ามาช่วย ลองดูตัวอย่างโค้ดต่อไปนี้

    /* รวบรวม font-size ของทุกๆ กล่องเนื้อหาเอาไว้ที่ส่วนนี้ พร้อมกับตั้งชื่อให้สื่อความหมาย */
$fontSize: (
    'highlight': 20,
    'search': 14
);
 
/* สร้าง function สำหรับใช้ดึงค่า font-size ตามชื่อกล่องที่ระบุ */
@function getFontSize($block) {
    @return map-get($fontSize, $block);
}
 
/* สร้าง mixin สำหรับการกำหนด font-size โดยใช้หน่วย rem */
@mixin font-size ($size) {
    font-size: $size + px;
    font-size: ($size / 10) + rem;
}

    จากนี้ไป เวลาเราจะกำหนด font-size ให้กับกล่องอะไรก็ตาม ให้เราทำผ่าน function ที่ใช้ดึงค่า font-size ที่เราได้กำหนดไว้เสมอ แบบนี้

    .highlight{
    @include font-size(getFontSize('highlight'));
}
.search{
    @include font-size(getFontSize('search'));
}

    เพียงเท่านี้ เราก็จะรู้หมดว่า font-size ทั้งหมดของงานมีขนาดไหนบ้าง ยิ่งถ้าเราทำงานร่วมกับคนอื่นๆ เราก็จะรู้ด้วยว่าเค้าได้เพิ่มขนาดไหนเข้ามา จะเห็นว่าการจัดการ font-size ที่ดี นอกจากจะช่วยทำให้โค้ดสั้นลงแล้ว ยังช่วยให้การพัฒนาเว็บไซต์มีประสิทธิภาพมากขึ้นอีกด้วย

    http://www.siamhtml.com/how-to-define-font-size-in-responsive-web-design/


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized