คำแนะนำสำหรับมืออาชีพในการออกแบบเว็บที่ตอบสนอง

เนื้อหา

• ภาพที่ตอบสนอง
• ประสิทธิภาพ
• โหลดตามเงื่อนไขและขี้เกียจ
• การพิมพ์ที่ตอบสนอง
• แบบสอบถามสื่อใน JavaScript
• การเพิ่มประสิทธิภาพแบบก้าวหน้า
• เค้าโครง
• เค้าโครงตาราง CSS
• สุดท้าย

การออกแบบเว็บที่ตอบสนองนั้นฟังดูเรียบง่ายอย่างไม่น่าเชื่อ เลือกใช้กริดที่ยืดหยุ่นสำหรับเลย์เอาต์ใช้สื่อที่ยืดหยุ่น (รูปภาพวิดีโอ iframe) และใช้คิวรีสื่อเพื่ออัปเดตการวัดเหล่านี้เพื่อจัดเรียงเนื้อหาบนวิวพอร์ตใด ๆ ได้ดีที่สุด ในทางปฏิบัติเราได้เรียนรู้ว่ามันไม่ง่ายอย่างนั้นจริงๆ ปัญหาเล็ก ๆ น้อย ๆ ที่เกิดขึ้นในทุกโครงการทำให้เราเกาหัวและบางครั้งอาจถึงขั้นแกะสลักเล็บมือบนโต๊ะทำงานของเรา

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

1. ภาพที่ตอบสนอง
2. การปรับปรุงประสิทธิภาพ
3. การพิมพ์ที่ตอบสนอง
4. แบบสอบถามสื่อใน JavaScript
5. การเพิ่มประสิทธิภาพแบบก้าวหน้า
6. เค้าโครง

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

'แล้ว ... แล้วเทคนิคขั้นสูงเหล่านี้ล่ะ?' ฉันได้ยินคุณถาม ฉันคิดว่า Stephen Hay สรุปได้ดีที่สุดเมื่อเขากล่าวว่า 'สุดยอดเทคนิค RWD คือการเริ่มต้นโดยไม่ใช้เทคนิค RWD ขั้นสูงใด ๆ เริ่มต้นด้วยเนื้อหาที่มีโครงสร้างและสร้างแนวทางของคุณ เพิ่มจุดพักก็ต่อเมื่อการออกแบบแตกและเนื้อหาสั่งการและ ... เท่านี้เอง '

ในบทความนี้ฉันจะเริ่มต้นด้วยพื้นฐานและเพิ่มเลเยอร์ของความซับซ้อนตามที่สถานการณ์อนุญาตเพื่อสร้างเทคนิคขั้นสูงเหล่านั้น มาเริ่มกันเลย.

ภาพที่ตอบสนอง

สื่อของไหลเป็นส่วนสำคัญของ RWD เมื่อ Ethan Marcotte ถูกกำหนดครั้งแรก ความกว้าง: 100%; , ความกว้างสูงสุด: 100%; ยังคงใช้งานได้ในปัจจุบัน แต่ภูมิทัศน์ของภาพที่ตอบสนองได้กลายเป็นเรื่องที่ซับซ้อนมากขึ้น ด้วยจำนวนขนาดหน้าจอความหนาแน่นของพิกเซลและอุปกรณ์ที่เพิ่มขึ้นเพื่อรองรับเราจึงต้องการการควบคุมที่มากขึ้น

ข้อกังวลหลักสามประการถูกกำหนดโดยกลุ่มชุมชน Responsive Images (RICG):

1. ขนาดกิโลไบต์ของรูปภาพที่เราส่งผ่านสายไฟ
2. ขนาดจริงของรูปภาพที่เรากำลังส่งไปยังอุปกรณ์ DPI สูง
3. ครอบตัดรูปภาพในรูปแบบของทิศทางศิลปะสำหรับขนาดเฉพาะของวิวพอร์ต

Yoav Weiss ด้วยความช่วยเหลือจาก Indiegogo ได้ทำงานส่วนใหญ่ในการใช้งาน Blink ซึ่งเป็นส่วนแยกของ WebKit ของ Google และเมื่อคุณอ่านสิ่งนี้จะมีการจัดส่งใน Chrome และ Firefox Safari 8 จะจัดส่ง srcset อย่างไรก็ตามแอตทริบิวต์ขนาดมีเฉพาะในการสร้างในเวลากลางคืนและรูปภาพ> ยังไม่ได้ใช้งาน

ด้วยการมาถึงของสิ่งใหม่ ๆ ในกระบวนการพัฒนาเว็บของเราการเริ่มต้นอาจเป็นเรื่องยาก มาดูตัวอย่างทีละขั้นตอนกัน

img! - ประกาศรูปภาพสำรองสำหรับเบราว์เซอร์ที่ไม่ใช่รูปภาพทั้งหมดที่รองรับ -> src = "horse-350.webp"! - ประกาศขนาดรูปภาพทั้งหมดใน srcset รวมความกว้างของรูปภาพโดยใช้ w descriptor เพื่อแจ้งเบราว์เซอร์เกี่ยวกับความกว้างของแต่ละภาพ -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - ขนาดจะแจ้งให้เบราว์เซอร์ทราบถึงรูปแบบไซต์ของเรา เรากำลังพูดถึงวิวพอร์ตใด ๆ ที่มีขนาด 64ems ขึ้นไปให้ใช้รูปภาพที่จะใช้พื้นที่ 70% ของวิวพอร์ต -> ขนาด = "(min-width: 64em) 70vw,! - หากวิวพอร์ตไม่เป็นเช่นนั้น ใหญ่สำหรับวิวพอร์ตใด ๆ ที่มีขนาด 37.5ems ขึ้นไปให้ใช้ภาพที่ใช้พื้นที่ 95% ของวิวพอร์ต -> (ความกว้างต่ำสุด: 37.5em) 95vw,! - และหากวิวพอร์ตเล็กกว่านั้นให้ใช้ ภาพที่ใช้พื้นที่ 100% ของวิวพอร์ต -> 100vw "! - มีข้อความแสดงแทนเสมอ -> alt =" ม้า "/>

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

นอกจากนี้อย่าลืมว่าเรากำลังฮาร์ดโค้ดแอตทริบิวต์ขนาดเพื่อกำหนดโดยตรงกับการออกแบบของเรา ซึ่งอาจทำให้เกิดปัญหาในการเคลื่อนไปข้างหน้า ตัวอย่างเช่นหากคุณออกแบบไซต์ของคุณใหม่คุณจะต้องกลับไปที่ img> หรือรูปภาพ> s ทั้งหมดและกำหนดขนาดใหม่ หากคุณใช้ CMS สิ่งนี้สามารถเอาชนะได้โดยเป็นส่วนหนึ่งของกระบวนการสร้างของคุณ

WordPress มีปลั๊กอินช่วยอยู่แล้ว กำหนด srcset บนพันธุ์อิมเมจมาตรฐาน WP และอนุญาตให้คุณประกาศขนาดในตำแหน่งศูนย์กลาง เมื่อเพจถูกสร้างขึ้นจากฐานข้อมูลเพจจะเปลี่ยนการกล่าวถึงบน img> และแทนที่ด้วยมาร์กอัปรูปภาพ

ขั้นพื้นฐาน

• ลองนึกดูว่าคุณจำเป็นต้องใส่รูปภาพจริงๆหรือไม่ เป็นเนื้อหาหลักของรูปภาพหรือเป็นการตกแต่ง ภาพที่น้อยกว่าหนึ่งภาพจะทำให้โหลดได้เร็วขึ้น
• ปรับภาพที่คุณต้องการให้เหมาะสมโดยใช้ ImageOptim
• ตั้งค่าส่วนหัวหมดอายุสำหรับรูปภาพของคุณบนเซิร์ฟเวอร์หรือไฟล์. htaccess (ดูรายละเอียดใน "ประสิทธิภาพ")
• PictureFill ให้การสนับสนุน polyfill สำหรับรูปภาพ

ขั้นสูง

• ขี้เกียจโหลดภาพโดยใช้ปลั๊กอิน Lazy Load ของ jQuery
• ใช้ HTMLImageElement.Sizes และ HTMLPictureElement สำหรับการตรวจจับคุณลักษณะ
• ปลั๊กอิน PictureFill WP ขั้นสูงที่พบใน Github จะช่วยให้คุณกำหนดค่าความกว้างและขนาดของรูปภาพที่กำหนดเองได้

ประสิทธิภาพ

เพื่อให้ได้ประสิทธิภาพการรับรู้ที่เร็วที่สุดบนหน้าเว็บของเราเราจำเป็นต้องใช้ HTML และ CSS ทั้งหมดที่จำเป็นในการแสดงผลส่วนบนสุดของหน้าเว็บของเราภายในการตอบกลับครั้งแรกจากเซิร์ฟเวอร์ ตัวเลขมหัศจรรย์นั้นคือ 14kb และขึ้นอยู่กับขนาดหน้าต่างความแออัดสูงสุดภายในเวลาเดินทางรอบแรก (RTT)

Patrick Hamann หัวหน้าฝ่ายเทคนิคส่วนหน้าของ Guardian และทีมของเขาสามารถทำลายกำแพง 1,000 มิลลิวินาทีโดยใช้เทคนิคส่วนหน้าและแบ็กเอนด์ผสมกัน แนวทางของ Guardian คือเพื่อให้แน่ใจว่าเนื้อหาที่ต้องการ - บทความ - จะถูกส่งไปยังผู้ใช้โดยเร็วที่สุดเท่าที่จะเป็นไปได้และภายใน 14kb magic number

ลองดูกระบวนการ:

1. ผู้ใช้คลิกลิงก์ Google ไปยังเรื่องราวข่าว
2. คำขอบล็อกเดียวจะถูกส่งไปยังฐานข้อมูลสำหรับบทความ ไม่มีการร้องขอเรื่องราวหรือความคิดเห็นที่เกี่ยวข้อง
3. HTML ถูกโหลดโดยมี Critical CSS
4. ในหัว>
5. มีการดำเนินการขั้นตอน "ตัดมัสตาร์ด" และองค์ประกอบเงื่อนไขใด ๆ ตามคุณลักษณะของอุปกรณ์ของผู้ใช้จะถูกโหลด
6. เนื้อหาใด ๆ ที่เกี่ยวข้องหรือสนับสนุนบทความ (รูปภาพบทความที่เกี่ยวข้องความคิดเห็นของบทความและอื่น ๆ ) จะถูกโหลดเข้าที่

การปรับเส้นทางการเรนเดอร์วิกฤตให้เหมาะสมเช่นนี้หมายความว่าส่วนหัว> มีความยาว 222 บรรทัด อย่างไรก็ตามเนื้อหาที่สำคัญที่ผู้ใช้เห็นยังคงอยู่ในน้ำหนักบรรทุกเริ่มต้น 14kb เมื่อ gzipped เป็นกระบวนการนี้ที่ช่วยทำลายอุปสรรคในการแสดงผล 1,000 มิลลิวินาที

โหลดตามเงื่อนไขและขี้เกียจ

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

เทคนิคหนึ่งคือการปิดการโหลดบางสิ่งไว้จนกว่าผู้ใช้จะแสดงเจตนาที่จะใช้คุณลักษณะนั้น สิ่งนี้จะถือว่าเป็นเงื่อนไข คุณสามารถปิดการโหลดในไอคอนโซเชียลได้จนกว่าผู้ใช้จะวางเมาส์เหนือหรือแตะไอคอนหรือคุณอาจหลีกเลี่ยงการโหลด iframe Google Map บนวิวพอร์ตขนาดเล็กซึ่งผู้ใช้มีแนวโน้มที่จะต้องการเชื่อมโยงไปยังแอปพลิเคชันการทำแผนที่โดยเฉพาะ อีกวิธีหนึ่งคือการ "ตัดมัสตาร์ด" โปรดดูรายละเอียดในกรอบด้านบน

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

ขั้นพื้นฐาน

• เปิดใช้งาน gzipping สำหรับไฟล์และตั้งค่าส่วนหัวหมดอายุสำหรับเนื้อหาคงที่ทั้งหมด (netm.ag/expire-260)
• ใช้ปลั๊กอิน Lazy Load jQuery สิ่งนี้จะโหลดภาพเมื่อเข้าใกล้วิวพอร์ตหรือหลังจากช่วงเวลาหนึ่ง

ขั้นสูง

• ตั้งค่าอย่างรวดเร็วหรือ CloudFlare เครือข่ายการจัดส่งเนื้อหา (CDN) ส่งเนื้อหาแบบคงที่ของคุณไปยังผู้ใช้เร็วกว่าเซิร์ฟเวอร์ของคุณเองและมีระดับฟรี
• เปิดใช้งาน SPDY สำหรับเบราว์เซอร์ที่เปิดใช้งาน http2 เพื่อใช้ประโยชน์จากคุณสมบัติ http2 เช่นคำขอ http แบบขนาน
• Social Count ช่วยให้สามารถโหลดไอคอนโซเชียลของคุณได้ตามเงื่อนไข
• การใช้ Static Maps API จะช่วยให้คุณสามารถเปลี่ยนแผนที่ Google แบบโต้ตอบสำหรับรูปภาพได้ ดูตัวอย่างของ Brad Frost ได้ที่ netm.ag/static-260
• Ajax Include Pattern จะโหลดตัวอย่างเนื้อหาจากแอตทริบิวต์ data-before, data-after หรือ data-replace

การพิมพ์ที่ตอบสนอง

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

Stephen Hay แนะนำให้ตั้งค่าขนาดตัวอักษร HTML เป็น 100 เปอร์เซ็นต์ (อ่าน: ปล่อยไว้ตามเดิม) เนื่องจากเบราว์เซอร์หรือผู้ผลิตอุปกรณ์แต่ละรายกำหนดค่าเริ่มต้นที่อ่านได้อย่างสมเหตุสมผลสำหรับความละเอียดหรืออุปกรณ์เฉพาะ สำหรับเบราว์เซอร์เดสก์ท็อปส่วนใหญ่จะมีขนาด 16px

ในทางกลับกันมัวร์ใช้หน่วย REM และขนาดฟอนต์ HTML เพื่อกำหนดขนาดตัวอักษรขั้นต่ำสำหรับองค์ประกอบเนื้อหาบางอย่าง ตัวอย่างเช่นหากคุณต้องการให้บทความโดยบรรทัดเป็น 14px เสมอให้กำหนดเป็นขนาดแบบอักษรพื้นฐานขององค์ประกอบ HTML แล้วตั้งค่า. byline {font-size: 1rem;} เมื่อคุณปรับขนาดร่างกาย: ขนาดตัวอักษร: เพื่อให้เหมาะกับวิวพอร์ตคุณจะไม่ส่งผลกระทบต่อรูปแบบ. by-line

ความยาวบรรทัดการอ่านที่ดีก็สำคัญเช่นกัน - ตั้งเป้าไว้ที่ 45 ถึง 65 อักขระ คุณสามารถใช้ bookmarklet เพื่อตรวจสอบเนื้อหาของคุณได้ หากคุณรองรับหลายภาษาในการออกแบบของคุณความยาวบรรทัดอาจแตกต่างกันไปเช่นกัน มัวร์แนะนำให้ใช้: lang (de) article {max-width: 30em} เพื่อปกปิดปัญหาที่นั่น

ในการรักษาจังหวะในแนวตั้งให้ตั้งระยะขอบล่างกับบล็อกเนื้อหา ul> ol> blockquote> ตาราง> blockquote> และอื่น ๆ ให้เหมือนกับความสูงของเส้น หากจังหวะถูกขัดจังหวะด้วยการแนะนำรูปภาพคุณสามารถแก้ไขได้โดยเพิ่ม Baseline.js หรือ BaselineAlign.js

ขั้นพื้นฐาน

• ใช้ฟอนต์ของคุณเป็นตัวอักษร 100 เปอร์เซ็นต์
• ทำงานในหน่วย em สัมพัทธ์
• กำหนดระยะขอบของคุณเป็นความสูงของเส้นเพื่อรักษาจังหวะแนวตั้งในการออกแบบของคุณ

ขั้นสูง

• ปรับปรุงประสิทธิภาพการโหลดฟอนต์ด้วย Enhance.js หรือการโหลดฟอนต์รอการตัดบัญชี
• ใช้ Sass @includes สำหรับหัวเรื่องเชิงความหมาย
• บ่อยครั้งที่เราต้องใช้สไตล์ h5 ในวิดเจ็ตแถบด้านข้างที่ต้องใช้มาร์กอัป h2 ใช้ Bearded’s Typographic Mixins เพื่อควบคุมขนาดและคงความหมายด้วยรหัสด้านล่าง:

.sidebar h2 {@include head-5}

แบบสอบถามสื่อใน JavaScript

นับตั้งแต่ที่เราสามารถควบคุมเลย์เอาต์ในวิวพอร์ตที่หลากหลายผ่านการสืบค้นสื่อเราจึงได้มองหาวิธีที่จะเชื่อมโยงสิ่งนั้นเข้ากับการเรียกใช้ JavaScript ของเราด้วยเช่นกัน มีสองสามวิธีในการเริ่มการทำงานของ JavaScript บนความกว้างความสูงและทิศทางของวิวพอร์ตและคนฉลาดบางคนได้เขียนปลั๊กอิน JS เนทีฟที่ใช้งานง่ายเช่น Enquire.js และ Simple State Manager คุณสามารถสร้างสิ่งนี้ด้วยตัวเองโดยใช้ matchMedia อย่างไรก็ตามคุณมีปัญหาที่ต้องทำสำเนาคิวรีสื่อใน CSS และ JavaScript

Aaron Gustafson มีเคล็ดลับที่เป็นระเบียบซึ่งหมายความว่าคุณไม่จำเป็นต้องจัดการและจับคู่คำค้นหาสื่อใน CSS และ JS ของคุณ แนวคิดเดิมมาจาก Jeremy Keith และในตัวอย่างนี้ Gustafson ได้นำไปใช้อย่างเต็มรูปแบบ

ใช้ getActiveMQ (netm.ag/media-260) ฉีด div # getActiveMQ-watcher ที่ส่วนท้ายขององค์ประกอบของร่างกายและซ่อนไว้ จากนั้นภายในชุด CSS # getActiveMQ-watcher {font-family: break-0;} ไปยังแบบสอบถามสื่อแรก font-family: break-1; ไปที่สอง font-family: break-2; ไปที่สามและอื่น ๆ

สคริปต์ใช้ watchResize () (netm.ag/resize-260) เพื่อตรวจสอบว่าขนาดของวิวพอร์ตเปลี่ยนไปหรือไม่จากนั้นจะอ่านตระกูลฟอนต์ที่ใช้งานอยู่กลับไป ตอนนี้คุณสามารถใช้สิ่งนี้เพื่อเชื่อมต่อการปรับปรุง JS เช่นการเพิ่มอินเทอร์เฟซแบบแท็บไปยัง dl> เมื่อวิวพอร์ตอนุญาตการเปลี่ยนลักษณะการทำงานของไลท์บ็อกซ์หรืออัปเดตเค้าโครงของตารางข้อมูล ตรวจสอบ getActiveMQ Codepen ที่ netm.ag/active-260

ขั้นพื้นฐาน

• อย่าลืมเกี่ยวกับ JavaScript สำหรับวิวพอร์ตต่างๆ จัดเตรียมเนื้อหาและฟังก์ชั่นเว็บไซต์ให้กับผู้ใช้ด้วยวิธีที่พวกเขาสามารถเข้าถึงได้จากวิวพอร์ตทั้งหมด เราไม่ควรต้องใช้ JavaScript

ขั้นสูง

• ขยายวิธีการของ Gustafson โดยใช้ Breakup เป็นรายการคิวรีสื่อที่กำหนดไว้ล่วงหน้าและสร้างรายการตระกูลฟอนต์สำหรับ getActiveMQ-watcher โดยอัตโนมัติ

การเพิ่มประสิทธิภาพแบบก้าวหน้า

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

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

เค้าโครง

รูปแบบที่ยืดหยุ่นนั้นพูดง่าย แต่มีหลายวิธี สร้างเค้าโครงกริดอย่างง่ายโดยใช้มาร์กอัปน้อยลงโดยใช้: ตัวเลือกที่ n-child ()

/ * ประกาศความกว้างแรกของอุปกรณ์เคลื่อนที่สำหรับกริด * / .grid-1-4 {float: left; ความกว้าง: 100%; } / * เมื่อวิวพอร์ตมีค่าอย่างน้อย 37.5em ให้ตั้งค่าเส้นตารางเป็น 50% ต่อองค์ประกอบ * / @media (ความกว้างขั้นต่ำ: 37.5em) {.grid-1-4 {width: 50%; } / * ล้างโฟลตทุก ๆ วินาทีหลังจากองค์ประกอบแรก เป้าหมายนี้กำหนดเป้าหมายที่ 3, 5, 7, 9 ... ในตาราง * / .grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (ความกว้างขั้นต่ำ: 64em) {.grid-1-4 {ความกว้าง: 25%; } / * ลบล้างก่อนหน้า * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * ล้างโฟลตทุกๆองค์ประกอบที่ 4 หลังจากตัวแรก เป้าหมายนี้กำหนดเป้าหมายที่ 5, 9 ... ในตาราง * / .grid-1-4: n-of-type (4n + 1) {clear: left; }}

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

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

เค้าโครงตาราง CSS

Grid มีไว้สำหรับเลย์เอาต์ระดับมาโคร โมดูลโครงร่างแบบกริดช่วยให้คุณสามารถอธิบายเลย์เอาต์ของคุณภายใน CSS ของคุณได้อย่างดีเยี่ยม แม้ว่าจะยังอยู่ในขั้นตอนร่างในขณะนี้ฉันขอแนะนำบทความนี้เกี่ยวกับเค้าโครง CSS Grid โดย Rachel Andrew

สุดท้าย

นี่เป็นเพียงเคล็ดลับเล็ก ๆ น้อย ๆ ในการขยายแนวปฏิบัติที่ตอบสนองของคุณ เมื่อเข้าใกล้งานที่ตอบสนองใหม่ ๆ ให้ถอยกลับไปและตรวจสอบให้แน่ใจว่าคุณได้รับข้อมูลพื้นฐานที่ถูกต้อง เริ่มต้นด้วยเนื้อหาของคุณ HTML และประสบการณ์ที่ได้รับการปรับปรุงเลเยอร์และไม่มีข้อ จำกัด ใด ๆ ว่าคุณจะนำการออกแบบไปใช้ที่ใด

บทความนี้เคยปรากฏในฉบับ 260 ของ นิตยสารสุทธิ.