ทำไมคุณต้องเริ่มฝึกการพัฒนาเพื่อมือถือเป็นหลัก

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

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

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

แต่ไม่ต้องกลัว! การพัฒนาครั้งแรกบนมือถือพร้อมให้คุณไม่ต้องปวดหัว ข้อยกเว้น และโหลดหน้าเว็บช้า

จะเกิดอะไรขึ้นกับ dev . ที่เน้นเดสก์ท็อปเป็นหลัก

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

ด้วยการพัฒนาสำหรับหน้าจอขนาดใหญ่แล้วเพิ่มสไตล์มือถือลงในเอกสาร CSS ต่อไป ปัญหาสองประการปรากฏขึ้น:

1. การเปลี่ยนแปลงใดๆ ที่ทำในสไตล์เดสก์ท็อป (สูงกว่าในเอกสาร) จะเปลี่ยนวิธีที่ไซต์บนมือถือปรากฏขึ้น หากไม่ได้เขียนทับสไตล์ใหม่อย่างชัดเจนสำหรับไซต์บนมือถือ การสร้างบรรทัดพิเศษของ CSS ที่ไม่สำคัญต้องใช้เวลาหลายชั่วโมงของโปรเจ็กต์และขัดต่อหลักการของโค้ด DRY
2. อุปกรณ์พกพาเริ่มโหลดหน้าโดยแสดงสไตล์เดสก์ท็อปทั้งหมด เมื่อเวอร์ชันเดสก์ท็อปที่หนักหน่วงเสร็จสิ้นการเรนเดอร์แล้ว การจัดสไตล์สำหรับมือถือก็จะถูกนำไปใช้ สิ่งนี้จะโหลดทรัพยากรเพิ่มเติม ซึ่งหมายความว่าอุปกรณ์มือถือใช้เวลานานกว่านั้นในการแสดงหน้าที่โหลดอย่างสมบูรณ์

นี่คือจุดเริ่มต้นของการพัฒนาอุปกรณ์พกพาเพื่อกอบกู้โลก วิธีนี้สนับสนุนลำดับ CSS ที่ถูกต้อง (อุปกรณ์เคลื่อนที่ไปยังเดสก์ท็อปจากบนลงล่าง) ตรวจสอบให้แน่ใจว่าอุปกรณ์ใช้เฉพาะข้อมูลที่จำเป็นเมื่อต้องการเท่านั้น

ลองมาดูวิธีแก้ไขปัญหาเหล่านี้กัน

การเรนเดอร์อุปกรณ์มือถือมีลักษณะอย่างไร

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

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

หากคุณกำลังใช้วิธีที่เน้นเดสก์ท็อปเป็นหลัก อุปกรณ์มือถือจะแสดงผลตามลำดับต่อไปนี้:

1. อ่านสไตล์แรก
2. ดาวน์โหลดภาพขนาดใหญ่ (กำลังจะถูกแทนที่)
3. แสดงองค์ประกอบ
4. อ่านสไตล์มือถือ
5. ดาวน์โหลดรูปภาพขนาดเล็ก (แทนที่รูปภาพขนาดใหญ่)
6. แสดงองค์ประกอบอีกครั้ง

อย่างไรก็ตาม หากใช้วิธี Mobile-First อุปกรณ์จะแสดงตามลำดับนี้:

1. อ่านสไตล์แรก
2. ดาวน์โหลดภาพขนาดเล็ก
3. ข้ามสไตล์เดสก์ท็อปเท่านั้น (เนื่องจากไม่เกี่ยวข้อง)
4. แสดงองค์ประกอบหนึ่งครั้ง

เว็บไซต์ไม่เพียงมีขั้นตอนที่ต้องดำเนินการน้อยกว่าก่อนที่จะแสดงหน้าที่เสร็จสิ้นไปยังเบราว์เซอร์ แต่ยังลบการเรียกพิเศษไปยังภาพที่ไม่สำคัญที่ไม่ได้ใช้!

โปรดทราบว่าการสืบค้นสื่อจะเปลี่ยนจาก max-width เป็น min-width ด้วยการพัฒนาเพื่อมือถือเป็นอันดับแรก การสืบค้นความกว้างสูงสุดจะนำไปใช้กับอุปกรณ์ทั้งหมดที่มีขนาดเล็กกว่า 1,000px ในขณะที่การสืบค้นความกว้างขั้นต่ำจะนำไปใช้กับอุปกรณ์ที่มากกว่า 1,000px

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

หยุดสู้ตัวเอง

สมมติว่าเรากำลังดำเนินการในโครงการที่มีไฟล์ CSS ที่แสดงความคิดเห็นเป็นสามส่วนหลัก ได้แก่ เดสก์ท็อป แท็บเล็ต และมือถือ

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

เนื่องจากเราสร้างไซต์ของเราด้วยวิธีแรกบนเดสก์ท็อป CSS ของเราจึงมีลักษณะเช่นนี้สำหรับองค์ประกอบ .header ของเรา:

เป้าหมายของเราคือลดปริมาณการจัดสไตล์ที่ส่งไปยังมือถือ ในการเริ่มต้น เราต้องทำรายการสิ่งที่ถูกนำไปใช้กับองค์ประกอบ โดยคำนึงถึงเมื่อเราเขียนทับสไตล์ของเราเอง

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

มาดูภาพของเรากันอีกครั้ง เนื่องจากนั่นมีผลกระทบมากที่สุดต่อความเร็วของไซต์ของเรา

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

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

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

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

ทำงานอย่างชาญฉลาด ไม่ยาก

การพัฒนาเดสก์ท็อปเป็นอันดับแรกสร้างปัญหามากกว่าที่จะแก้ไข “การเปลี่ยนไปใช้วิธีการพัฒนาที่เน้นอุปกรณ์พกพาเป็นหลักจะช่วยให้คุณทำงานอย่างชาญฉลาดได้ไม่ยาก ”

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

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