14 KiB

Raw Blame History

งานปรับปรุง CSS

วัตถุประสงค์

เปลี่ยนโปรเจกต์เทอร์ราเรียมของคุณให้ใช้เทคนิคการจัดวาง CSS แบบทันสมัย! ปรับปรุงวิธีการจัดวางแบบ absolute positioning ที่ใช้อยู่ในปัจจุบันให้เป็น Flexbox หรือ CSS Grid เพื่อการออกแบบที่ดูแลรักษาได้ง่ายและตอบสนองต่อการใช้งานได้ดียิ่งขึ้น งานนี้จะท้าทายให้คุณนำมาตรฐาน CSS สมัยใหม่มาใช้ในขณะที่ยังคงความสวยงามของเทอร์ราเรียมไว้

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

คำแนะนำสำหรับงาน

เฟสที่ 1: การวิเคราะห์และการวางแผน

ตรวจสอบโค้ดเทอร์ราเรียมปัจจุบันของคุณ - ระบุว่าองค์ประกอบใดที่กำลังใช้ absolute positioning
เลือกวิธีการจัดวาง - ตัดสินใจว่า Flexbox หรือ CSS Grid เหมาะสมกับเป้าหมายการออกแบบของคุณมากกว่า
ร่างโครงสร้างการจัดวางใหม่ - วางแผนว่าคอนเทนเนอร์และองค์ประกอบของพืชจะถูกจัดเรียงอย่างไร

เฟสที่ 2: การดำเนินการ

สร้างเวอร์ชันใหม่ ของโปรเจกต์เทอร์ราเรียมในโฟลเดอร์แยกต่างหาก
อัปเดตโครงสร้าง HTML ตามความจำเป็นเพื่อรองรับวิธีการจัดวางที่คุณเลือก
ปรับปรุง CSS ให้ใช้ Flexbox หรือ CSS Grid แทน absolute positioning
รักษาความสม่ำเสมอของภาพ - ตรวจสอบให้แน่ใจว่าพืชและขวดเทอร์ราเรียมยังคงอยู่ในตำแหน่งเดิม
เพิ่มพฤติกรรมการตอบสนอง - การจัดวางของคุณควรปรับเปลี่ยนได้อย่างเหมาะสมกับขนาดหน้าจอที่แตกต่างกัน

เฟสที่ 3: การทดสอบและการจัดทำเอกสาร

การทดสอบข้ามเบราว์เซอร์ - ตรวจสอบว่าการออกแบบของคุณทำงานได้ใน Chrome, Firefox, Edge และ Safari
การทดสอบการตอบสนอง - ตรวจสอบการจัดวางของคุณบนหน้าจอมือถือ แท็บเล็ต และเดสก์ท็อป
การจัดทำเอกสาร - เพิ่มความคิดเห็นใน CSS ของคุณเพื่ออธิบายการเลือกวิธีการจัดวาง
ภาพหน้าจอ - บันทึกภาพเทอร์ราเรียมของคุณในเบราว์เซอร์และขนาดหน้าจอที่แตกต่างกัน

ข้อกำหนดทางเทคนิค

การจัดวาง

เลือกเพียงหนึ่ง: ใช้ Flexbox หรือ CSS Grid (ไม่ใช้ทั้งสองอย่างในองค์ประกอบเดียวกัน)
การออกแบบที่ตอบสนอง: ใช้หน่วยแบบสัมพัทธ์ (rem, em, %, vw, vh) แทนพิกเซลแบบคงที่
การเข้าถึง: รักษาโครงสร้าง HTML ที่มีความหมายและข้อความ alt
คุณภาพของโค้ด: ใช้การตั้งชื่อที่สอดคล้องกันและจัด CSS อย่างเป็นระเบียบ

ฟีเจอร์ CSS สมัยใหม่ที่ควรรวม

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

ข้อกำหนดการรองรับเบราว์เซอร์

Chrome/Edge: 2 เวอร์ชันล่าสุด
Firefox: 2 เวอร์ชันล่าสุด
Safari: 2 เวอร์ชันล่าสุด
เบราว์เซอร์มือถือ: iOS Safari, Chrome Mobile

สิ่งที่ต้องส่งมอบ

ไฟล์ HTML ที่อัปเดต พร้อมโครงสร้างที่มีความหมายมากขึ้น
ไฟล์ CSS ที่ปรับปรุง โดยใช้เทคนิคการจัดวางแบบทันสมัย
ชุดภาพหน้าจอ แสดงความเข้ากันได้ข้ามเบราว์เซอร์:
- มุมมองเดสก์ท็อป (1920x1080)
- มุมมองแท็บเล็ต (768x1024)
- มุมมองมือถือ (375x667)
- อย่างน้อย 2 เบราว์เซอร์ที่แตกต่างกัน
ไฟล์ README.md ที่บันทึก:
- การเลือกวิธีการจัดวาง (Flexbox vs Grid) และเหตุผล
- ความท้าทายที่พบระหว่างการปรับปรุง
- หมายเหตุเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์
- คำแนะนำสำหรับการรันโค้ดของคุณ

เกณฑ์การประเมิน

เกณฑ์	ยอดเยี่ยม (4)	ดี (3)	พัฒนา (2)	เริ่มต้น (1)
การจัดวาง	ใช้ Flexbox/Grid อย่างเชี่ยวชาญพร้อมฟีเจอร์ขั้นสูง; ตอบสนองได้เต็มที่	ใช้งานได้ถูกต้องพร้อมพฤติกรรมการตอบสนองที่ดี	ใช้งานพื้นฐานพร้อมปัญหาการตอบสนองเล็กน้อย	การจัดวางไม่สมบูรณ์หรือไม่ถูกต้อง
คุณภาพของโค้ด	CSS ที่สะอาดและจัดระเบียบดีพร้อมความคิดเห็นที่มีความหมาย	การจัดระเบียบดีพร้อมความคิดเห็นบางส่วน	การจัดระเบียบพอใช้พร้อมความคิดเห็นน้อย	การจัดระเบียบไม่ดี; เข้าใจยาก
ความเข้ากันได้ข้ามเบราว์เซอร์	ความสม่ำเสมอที่สมบูรณ์แบบในเบราว์เซอร์ที่กำหนดพร้อมภาพหน้าจอ	ความเข้ากันได้ดีพร้อมความแตกต่างเล็กน้อยที่บันทึกไว้	ปัญหาความเข้ากันได้บางอย่างที่ไม่ทำให้การทำงานเสียหาย	ปัญหาความเข้ากันได้ร้ายแรงหรือการทดสอบที่ขาดหายไป
การออกแบบที่ตอบสนอง	วิธีการ mobile-first ที่ยอดเยี่ยมพร้อมจุดเปลี่ยนที่ราบรื่น	พฤติกรรมการตอบสนองที่ดีพร้อมจุดเปลี่ยนที่เหมาะสม	ฟีเจอร์การตอบสนองพื้นฐานพร้อมปัญหาการจัดวางบางอย่าง	พฤติกรรมการตอบสนองที่จำกัดหรือเสียหาย
การจัดทำเอกสาร	README ที่ครอบคลุมพร้อมคำอธิบายและข้อมูลเชิงลึกโดยละเอียด	การจัดทำเอกสารที่ดีครอบคลุมทุกองค์ประกอบที่จำเป็น	การจัดทำเอกสารพื้นฐานพร้อมคำอธิบายน้อย	การจัดทำเอกสารไม่สมบูรณ์หรือขาดหายไป

แหล่งข้อมูลที่เป็นประโยชน์

คู่มือวิธีการจัดวาง

เครื่องมือทดสอบเบราว์เซอร์

เครื่องมือคุณภาพโค้ด

ความท้าทายเพิ่มเติม

🌟 การจัดวางขั้นสูง: ใช้ทั้ง Flexbox และ Grid ในส่วนต่าง ๆ ของการออกแบบ
🌟 การเพิ่มแอนิเมชัน: เพิ่ม CSS transitions หรือแอนิเมชันที่ทำงานร่วมกับการจัดวางใหม่
🌟 โหมดมืด: ใช้ตัวเลือกธีมที่เปลี่ยนได้ด้วย CSS custom properties
🌟 Container Queries: ใช้เทคนิค container query สมัยใหม่สำหรับการตอบสนองในระดับคอมโพเนนต์

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

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

14 KiB Raw Blame History