การออกแบบที่ปรับเปลี่ยนตามพื้นที่โฆษณา

Codelab นี้เป็นส่วนหนึ่งของหลักสูตรการฝึกอบรมการพัฒนา Progressive Web App ซึ่งพัฒนาโดยทีมฝึกอบรมของ Google Developers คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้หากทำตาม Codelab ตามลำดับ

ดูรายละเอียดทั้งหมดเกี่ยวกับหลักสูตรได้ที่ภาพรวมการพัฒนา Progressive Web App

บทนำ

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

สิ่งที่คุณจะได้เรียนรู้

  • วิธีจัดรูปแบบแอปเพื่อให้ทำงานได้ดีในอุปกรณ์หลายรูปแบบ
  • วิธีใช้ Flexbox เพื่อจัดระเบียบเนื้อหาเป็นคอลัมน์ได้อย่างง่ายดาย
  • วิธีใช้ Media Queries เพื่อจัดระเบียบเนื้อหาใหม่ตามขนาดหน้าจอ

สิ่งที่ควรทราบ

  • HTML และ CSS พื้นฐาน

สิ่งที่คุณจะต้องมี

  • คอมพิวเตอร์ที่มีสิทธิ์เข้าถึงเทอร์มินัล/เชลล์
  • การเชื่อมต่ออินเทอร์เน็ต
  • เครื่องมือแก้ไขข้อความ

ดาวน์โหลดหรือโคลนที่เก็บ pwa-training-labs จาก GitHub และติดตั้ง Node.js เวอร์ชัน LTS หากจำเป็น

หากไม่มีเซิร์ฟเวอร์การพัฒนาในเครื่องที่ต้องการ ให้ติดตั้งแพ็กเกจ Node.js http-server ดังนี้

npm install http-server -g

ไปที่ไดเรกทอรี responsive-design-lab/app/ แล้วเริ่มเซิร์ฟเวอร์

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

คุณสิ้นสุดการทำงานของเซิร์ฟเวอร์ได้ทุกเมื่อด้วย Ctrl-c

เปิดเบราว์เซอร์ แล้วไปที่ localhost:8080/

หมายเหตุ: ยกเลิกการลงทะเบียน Service Worker และล้างแคชทั้งหมดของ Service Worker สำหรับ localhost เพื่อไม่ให้รบกวน Lab ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณทำได้โดยคลิกล้างข้อมูลเว็บไซต์จากส่วนล้างพื้นที่เก็บข้อมูลของแท็บแอปพลิเคชัน

หากมีเครื่องมือแก้ไขข้อความที่ให้คุณเปิดโปรเจ็กต์ได้ ให้เปิดโฟลเดอร์ responsive-design-lab/app/ ซึ่งจะช่วยให้คุณจัดระเบียบข้อมูลได้ง่ายขึ้น หรือเปิดโฟลเดอร์ในระบบไฟล์ของคอมพิวเตอร์ app/ โฟลเดอร์คือที่ที่คุณจะสร้าง Lab

โฟลเดอร์นี้ประกอบด้วย

  • index.html คือหน้า HTML หลักสำหรับเว็บไซต์/แอปพลิเคชันตัวอย่าง
  • modernizr-custom.js เป็นเครื่องมือตรวจหาฟีเจอร์ที่ช่วยให้การทดสอบการรองรับ Flexbox เป็นเรื่องง่าย
  • styles/main.css คือชีตสไตล์แบบเรียงซ้อนสำหรับเว็บไซต์ตัวอย่าง

กลับไปที่แอปในเบราว์เซอร์ ลองลดความกว้างของหน้าต่างให้ต่ำกว่า 500 พิกเซล แล้วดูว่าเนื้อหาไม่ตอบสนองได้ดี

เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเปิดใช้โหมดอุปกรณ์ในเบราว์เซอร์ โหมดนี้จะจำลองลักษณะการทำงานของแอปบนอุปกรณ์เคลื่อนที่ โปรดสังเกตว่าหน้าเว็บจะซูมออกเพื่อให้เนื้อหาที่มีความกว้างคงที่พอดีกับหน้าจอ ซึ่งจะทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี เนื่องจากเนื้อหามีแนวโน้มที่จะเล็กเกินไปสำหรับผู้ใช้ส่วนใหญ่ ทำให้ต้องซูมและเลื่อน

แทนที่ TODO 3 ใน index.html ด้วยแท็กต่อไปนี้ 

<meta name="viewport" content="width=device-width, initial-scale=1">

บันทึกไฟล์ รีเฟรชหน้าในเบราว์เซอร์และตรวจสอบหน้าในโหมดอุปกรณ์ โปรดสังเกตว่าหน้าเว็บไม่ได้ซูมออกอีกต่อไป และขนาดของเนื้อหาตรงกับขนาดในอุปกรณ์เดสก์ท็อป หากเนื้อหาทำงานผิดปกติในโปรแกรมจำลองอุปกรณ์ ให้สลับเข้าและออกจากโหมดอุปกรณ์เพื่อรีเซ็ต

หมายเหตุ: การจำลองอุปกรณ์ช่วยให้คุณทราบคร่าวๆ ว่าเว็บไซต์จะมีลักษณะอย่างไรบนอุปกรณ์เคลื่อนที่ แต่คุณควรทดสอบเว็บไซต์บนอุปกรณ์จริงเสมอเพื่อให้เห็นภาพรวมทั้งหมด ดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อบกพร่องของอุปกรณ์ Android ใน Chrome และ Firefox

คำอธิบาย

แท็กวิวพอร์ตเมตาจะบอกเบราว์เซอร์ว่าต้องควบคุมขนาดและการปรับขนาดของหน้าเว็บอย่างไร พร็อพเพอร์ตี้ width จะควบคุมขนาดของวิวพอร์ต โดยตั้งค่าเป็นจำนวนพิกเซลที่เฉพาะเจาะจง (เช่น width=500) หรือตั้งค่าเป็นค่าพิเศษ device-width, ซึ่งเป็นความกว้างของหน้าจอในพิกเซล CSS ที่ระดับ 100% (มีค่า height และ device-height ที่สอดคล้องกัน ซึ่งอาจมีประโยชน์สำหรับหน้าเว็บที่มีองค์ประกอบที่เปลี่ยนขนาดหรือตำแหน่งตามความสูงของวิวพอร์ต)

พร็อพเพอร์ตี้ initial-scale จะควบคุมระดับการซูมเมื่อโหลดหน้าเว็บเป็นครั้งแรก การตั้งค่าขนาดเริ่มต้นจะช่วยปรับปรุงประสบการณ์การใช้งาน แต่เนื้อหายังคงล้นเกินขอบหน้าจอ เราจะแก้ไขปัญหานี้ในขั้นตอนถัดไป

สำหรับข้อมูลเพิ่มเติม

แทนที่ TODO 4 ใน styles/main.css ด้วยโค้ดต่อไปนี้

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

บันทึกไฟล์ ปิดใช้โหมดอุปกรณ์ในเบราว์เซอร์แล้วรีเฟรชหน้าเว็บ ลองลดความกว้างของหน้าต่าง โปรดสังเกตว่าเนื้อหาจะเปลี่ยนเป็นเลย์เอาต์แบบคอลัมน์เดียวที่ความกว้างที่ระบุ เปิดใช้โหมดอุปกรณ์อีกครั้งและสังเกตว่าเนื้อหาจะปรับให้พอดีกับความกว้างของอุปกรณ์

คำอธิบาย

เพื่อให้แน่ใจว่าข้อความอ่านได้ เราจึงใช้การค้นหาสื่อเมื่อความกว้างของเบราว์เซอร์กลายเป็น 48rem (768 พิกเซลที่ขนาดแบบอักษรเริ่มต้นของเบราว์เซอร์ หรือ 48 เท่าของขนาดแบบอักษรเริ่มต้นในเบราว์เซอร์ของผู้ใช้) ดูเมื่อใดควรใช้ Em เทียบกับ Rem เพื่อดูคำอธิบายที่ดีว่าเหตุใด rem จึงเป็นตัวเลือกที่ดีสำหรับหน่วยสัมพัทธ์ เมื่อมีการทริกเกอร์ Media Query เราจะเปลี่ยนเลย์เอาต์จาก 3 คอลัมน์เป็น 1 คอลัมน์โดยเปลี่ยน width ของ div ทั้ง 3 รายการให้เต็มหน้า

Flexible Box Layout Module (Flexbox) เป็นเครื่องมือที่มีประโยชน์และใช้งานง่ายในการสร้างเนื้อหาที่ปรับเปลี่ยนตามอุปกรณ์ Flexbox ช่วยให้เราได้ผลลัพธ์เช่นเดียวกับในขั้นตอนก่อนหน้า แต่จะจัดการการคำนวณระยะห่างให้เรา และมีพร็อพเพอร์ตี้ CSS จำนวนมากที่พร้อมใช้งานสำหรับการจัดโครงสร้างเนื้อหา

แสดงความคิดเห็นในกฎที่มีอยู่ใน CSS

ทำเครื่องหมายเป็นความคิดเห็นทุกกฎใน styles/main.css โดยการห่อกฎด้วย /* และ */ เราจะใช้กฎเหล่านี้เป็นกฎสำรองในกรณีที่ Flexbox ไม่รองรับในส่วน Flexbox เป็นการเพิ่มประสิทธิภาพแบบก้าวหน้า

เพิ่มเลย์เอาต์ Flexbox

แทนที่ TODO 5.2 ใน styles/main.css ด้วยโค้ดต่อไปนี้

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

บันทึกโค้ดและรีเฟรช index.html ในเบราว์เซอร์ ปิดใช้โหมดอุปกรณ์ในเบราว์เซอร์แล้วรีเฟรชหน้าเว็บ หากคุณทำให้หน้าต่างเบราว์เซอร์แคบลง คอลัมน์จะแคบลงจนเหลือเพียงคอลัมน์เดียวที่มองเห็นได้ เราจะแก้ไขปัญหานี้ด้วย Media Query ในแบบฝึกหัดถัดไป

คำอธิบาย

กฎแรกกำหนดให้ container div เป็นคอนเทนเนอร์ Flex ซึ่งจะเปิดใช้บริบท Flex สำหรับองค์ประกอบย่อยโดยตรงทั้งหมด เราใช้ทั้งไวยากรณ์เก่าและใหม่ในการรวม Flexbox เพื่อให้รองรับได้กว้างขึ้น (ดูรายละเอียดได้ที่ข้อมูลเพิ่มเติม)

กฎที่ 2 ใช้คลาส .col เพื่อสร้างองค์ประกอบย่อยแบบยืดหยุ่นที่มีความกว้างเท่ากัน การตั้งค่าอาร์กิวเมนต์แรกของพร็อพเพอร์ตี้ flex เป็น 1 สำหรับ div ทั้งหมดที่มีคลาส col จะแบ่งพื้นที่ที่เหลืออย่างเท่าเทียมกันระหว่าง div เหล่านั้น ซึ่งสะดวกกว่าการคำนวณและตั้งค่าความกว้างสัมพัทธ์ด้วยตนเอง

สำหรับข้อมูลเพิ่มเติม

ไม่บังคับ: ตั้งค่าความกว้างสัมพัทธ์ที่แตกต่างกัน

ใช้คลาสเทียม nth-child เพื่อตั้งค่าความกว้างสัมพัทธ์ของ 2 คอลัมน์แรกเป็น 1 และคอลัมน์ที่ 3 เป็น 1.5 คุณต้องใช้พร็อพเพอร์ตี้ flex เพื่อตั้งค่าความกว้างสัมพัทธ์สำหรับแต่ละคอลัมน์ เช่น ตัวเลือกสำหรับคอลัมน์แรกจะมีลักษณะดังนี้

.container .col:nth-child(1)

ใช้การค้นหาสื่อกับ Flexbox

แทนที่ TODO 5.4 ใน styles/main.css ด้วยโค้ดด้านล่าง

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

บันทึกโค้ดและรีเฟรช index.html ในเบราว์เซอร์ ตอนนี้หากคุณลดความกว้างของเบราว์เซอร์ เนื้อหาจะจัดระเบียบใหม่เป็นคอลัมน์เดียว

คำอธิบาย

เมื่อมีการเรียกใช้ Media Query เราจะเปลี่ยนเลย์เอาต์จาก 3 คอลัมน์เป็น 1 คอลัมน์โดยตั้งค่าพร็อพเพอร์ตี้ flex-flow เป็น column ซึ่งให้ผลลัพธ์เช่นเดียวกับ Media Query ที่เราเพิ่มในขั้นตอนที่ 5 Flexbox มีคุณสมบัติอื่นๆ อีกมากมาย เช่น flex-flow ที่ช่วยให้คุณจัดโครงสร้าง จัดลำดับใหม่ และจัดเนื้อหาได้อย่างง่ายดายเพื่อให้เนื้อหาตอบสนองได้ดีในทุกบริบท

เนื่องจาก Flexbox เป็นเทคโนโลยีที่ค่อนข้างใหม่ เราจึงควรใส่การสำรองไว้ใน CSS

เพิ่ม Modernizr

Modernizr เป็นเครื่องมือตรวจหาฟีเจอร์ที่ช่วยให้การทดสอบการรองรับ Flexbox เป็นเรื่องง่าย

แทนที่ TODO 6.1 ใน index.html ด้วยโค้ดเพื่อรวมบิลด์ Modernizr ที่กำหนดเอง

<script src="modernizr-custom.js"></script>

คำอธิบาย

เราได้รวมบิลด์ Modernizr ไว้ที่ด้านบนของ index.html ซึ่งจะทดสอบการรองรับ Flexbox ซึ่งจะเรียกใช้การทดสอบเมื่อโหลดหน้าเว็บและต่อท้ายคลาส flexbox ไปยังองค์ประกอบ <html> หากเบราว์เซอร์รองรับ Flexbox มิเช่นนั้น ระบบจะต่อท้ายคลาส no-flexbox กับองค์ประกอบ <html> ในส่วนถัดไป เราจะเพิ่มคลาสเหล่านี้ลงใน CSS

หมายเหตุ: หากเราใช้พร็อพเพอร์ตี้ flex-wrap ของ Flexbox เราจะต้องเพิ่มตัวตรวจหา Modernizr แยกต่างหากสำหรับฟีเจอร์นี้โดยเฉพาะ เบราว์เซอร์บางเวอร์ชันเก่ารองรับ Flexbox บางส่วนและไม่มีฟีเจอร์นี้

ใช้ Flexbox แบบต่อเนื่อง

มาใช้คลาส flexbox และ no-flexbox ใน CSS เพื่อระบุกฎสำรองเมื่อระบบไม่รองรับ Flexbox กัน

ตอนนี้ใน styles/main.css ให้เพิ่ม .no-flexbox หน้าแต่ละกฎที่เราแสดงความคิดเห็นไว้

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

ในไฟล์เดียวกัน ให้เพิ่ม .flexbox หน้ากฎที่เหลือ

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

อย่าลืมเพิ่ม .flexbox ลงในกฎสำหรับแต่ละคอลัมน์ หากคุณทำขั้นตอนที่ 5.3 ซึ่งเป็นขั้นตอนที่ไม่บังคับเสร็จแล้ว

บันทึกโค้ดแล้วรีเฟรช index.html ในเบราว์เซอร์ หน้าเว็บควรมีลักษณะเหมือนเดิม แต่ตอนนี้จะทำงานได้ดีในเบราว์เซอร์ใดก็ได้บนอุปกรณ์ใดก็ได้ หากมีเบราว์เซอร์ที่ไม่รองรับ Flexbox คุณสามารถทดสอบกฎสำรองได้โดยเปิด index.html ในเบราว์เซอร์นั้น

สำหรับข้อมูลเพิ่มเติม

คุณได้เรียนรู้วิธีจัดรูปแบบเนื้อหาให้ปรับเปลี่ยนตามพื้นที่โฆษณาได้แล้ว การใช้ Media Query ช่วยให้คุณเปลี่ยนเลย์เอาต์ของเนื้อหาตามขนาดหน้าต่างหรือหน้าจอของอุปกรณ์ของผู้ใช้ได้

สิ่งที่เราได้พูดถึงไปแล้ว

  • การตั้งค่าวิวพอร์ตภาพ
  • Flexbox
  • การค้นหาสื่อ

แหล่งข้อมูล

ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐานของการออกแบบที่ปรับเปลี่ยนตามพื้นที่โฆษณา

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Flexbox ในฐานะการเพิ่มประสิทธิภาพแบบก้าวหน้า

ดูข้อมูลเกี่ยวกับไลบรารีสำหรับ CSS ที่ปรับเปลี่ยนตามพื้นที่โฆษณา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Media Query

หากต้องการดู Codelab ทั้งหมดในหลักสูตรการฝึกอบรม PWA โปรดดู Codelab ต้อนรับสำหรับหลักสูตร