บทความนี้สาธิตขั้นตอนในการสร้างการออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์ใน HTML และ CSS โดยใช้:
วิธีสร้างการออกแบบเว็บไซต์ที่ตอบสนองด้วย HTML และ CSS
การสร้างการออกแบบเว็บไซต์ที่ตอบสนองด้วย HTML และ CSS เกี่ยวข้องกับการสร้างเลย์เอาต์ที่ปรับให้เข้ากับขนาดหน้าจอและความละเอียดที่แตกต่างกัน ต่อไปนี้เป็นขั้นตอนที่คุณสามารถปฏิบัติตามเพื่อสร้างการออกแบบเว็บไซต์ที่ตอบสนองได้:
ขั้นตอนที่ 1: เมตาแท็กวิวพอร์ต
“ วิวพอร์ต ” เมตาแท็กมีบทบาทสำคัญในการสร้างการออกแบบเว็บที่ตอบสนอง มันถูกใส่เข้าไปข้างใน “ <หัว> ” แท็กของไฟล์ HTML ที่มีแอตทริบิวต์ต่อไปนี้:
< เมตา ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์ ขนาดเริ่มต้น=1' / >
เมตาแท็กด้านบนมีสองแอตทริบิวต์:
- “ ชื่อ ” แอตทริบิวต์บอกชื่อของฟังก์ชันที่สร้าง/ใช้แท็กนี้ ตัวอย่างเช่น การตั้งค่า “ วิวพอร์ต ” ถึง “ ชื่อ ” แอตทริบิวต์เพื่อจัดการกับวิวพอร์ตของอุปกรณ์ต่างๆ
- “ เนื้อหา ” แอตทริบิวต์กำหนดค่าแอตทริบิวต์ก่อนหน้า กำหนดความกว้างของทุกอุปกรณ์และปรับขนาดเอกสาร/เว็บเพจเป็น 100%
ขั้นตอนที่ 2: ภาพที่ตอบสนอง
เนื่องจากขนาดของภาพแตกต่างกัน ดังนั้น จึงเป็นเรื่องยากที่จะตั้งค่าให้เหมือนกัน” ความสูง ' หรือ ' ความกว้าง ” คุณสมบัติสำหรับทุกภาพ เมื่อกำหนดขนาดของรูปภาพแล้ว ผู้ใช้ไม่ต้องปรับขนาดรูปภาพของหน้าเว็บด้วยหน้าจอ อย่างไรก็ตาม ผู้ใช้สามารถตั้งค่ารูปภาพที่ตอบสนองได้โดยใช้รหัสต่อไปนี้:
img {
สูงสุด ความกว้าง : 100 %;
}
“ ความกว้างสูงสุด ” คุณสมบัติ CSS จำกัด รูปภาพไม่ให้แสดงภายในพื้นที่ที่จัดสรร เมื่อตั้งค่าเป็น “%” ภาพจะปรับขนาดพร้อมกับการปรับขนาดองค์ประกอบหลัก สิ่งนี้จะสร้างเอฟเฟกต์ที่ตอบสนองต่อรูปภาพ
ขั้นตอนที่ 3: เค้าโครง Flexbox
ขอแนะนำให้ใช้เค้าโครง Flexbox เพื่อสร้างการออกแบบเว็บไซต์ที่ตอบสนอง ช่วยให้องค์ประกอบ HTML แสดงในตำแหน่งที่กำหนดและปรับขนาดพื้นที่ว่างสำหรับแต่ละชายน์ตามขนาดที่มีโดย div พาเรนต์ เลย์เอาต์ Flexbox มีคุณสมบัติหลายอย่างที่ให้อิสระแก่นักพัฒนาอย่างมาก เช่น ในโค้ดด้านล่าง:
< สไตล์ >
.พ่อแม่ {
จอแสดงผล: ดิ้น;
}
.เด็ก {
ดิ้น: 1 ;
ข้อความ- จัด : ศูนย์;
}
< / สไตล์ >
< ร่างกาย >
< แผนก ระดับ = 'พ่อแม่' >
< แผนก ระดับ = 'เด็ก' สไตล์ = 'เส้นขอบ: 3px สีน้ำเงินม่วงทึบ' >ยินดีต้อนรับ< / แผนก >
< แผนก ระดับ = 'เด็ก' สไตล์ = 'เส้นขอบ: สีเขียวเข้มทึบ 3px;' >ถึง< / แผนก >
< แผนก ระดับ = 'เด็ก' สไตล์ = 'เส้นขอบ: สีแดงทึบ 3px;' >ลินุกซ์< / แผนก >
< / แผนก >
< / ร่างกาย >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก สร้างองค์ประกอบ div พาเรนต์ที่มีรหัสเป็น “ พ่อแม่ ' ข้างใน ' <เนื้อหา> ” แท็ก
- จากนั้น สร้างองค์ประกอบ div ลูกหลายๆ ตัวและกำหนดคลาสของ “ เด็ก '.
- จากนั้นเลือก “ พ่อแม่ ” class และให้ค่าของ “ ดิ้น ” สำหรับ CSS “ แสดง ' คุณสมบัติ.
- หลังจากนั้นให้ระบุค่า “ 1 ” ถึง “ ดิ้น ” คุณสมบัติของแต่ละคน “ เด็ก ” คลาสที่ทำให้องค์ประกอบย่อยแสดงเป็น flex
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ด้านบนแสดงว่าองค์ประกอบย่อยมีความกว้างเท่ากันเมื่อเบราว์เซอร์ได้รับการปรับขนาด
ขั้นตอนที่ 4: เค้าโครงกริด
โครงร่างกริดสร้างกริดและกำหนดองค์ประกอบ HTML ภายในส่วนของกริด องค์ประกอบกริดเปลี่ยนไปตามขนาดหน้าจอของเว็บเพจ มันสร้างการออกแบบที่ตอบสนองเมื่อขนาดองค์ประกอบ HTML เปลี่ยนไปตามหน้าจออุปกรณ์:
< สไตล์ >.คอนเทนเนอร์ {
จอแสดงผล: ตาราง;
ตารางแม่แบบคอลัมน์: 1fr 1fr 1fr;
}
< / สไตล์ >
< ร่างกาย >
< แผนก ระดับ = 'ส่วนประกอบ' >
< แผนก สไตล์ = 'เส้นขอบ: 3px solid forestgreen;' >ลินุกซ์< / แผนก >
< แผนก สไตล์ = 'เส้นขอบ: สีเขียวเข้มทึบ 3px;' >ลินุกซ์< / แผนก >
< แผนก สไตล์ = 'เส้นขอบ: สีแดงทึบ 3px;' >ลินุกซ์< / แผนก >
< / แผนก >
< / ร่างกาย >
ในรหัสด้านบน:
- ขั้นแรก สร้าง div พาเรนต์และกำหนดคลาสเป็น “ ส่วนประกอบ ' ข้างใน ' <เนื้อหา> ” แท็ก หลังจากนั้นให้สร้างองค์ประกอบ div ลูกสามตัวในนั้น
- จากนั้นในไฟล์ CSS กำหนดให้เป็น “ กริด ” มูลค่าถึง “ แสดง ” คุณสมบัติสำหรับ “ คอนเทนเนอร์ ” แผนก
- หลังจากนั้น สร้างสามส่วนขนาดเท่าๆ กันบนหน้าเว็บโดยใช้ปุ่ม “ ตารางแม่แบบคอลัมน์ ” คุณสมบัติ และกำหนดให้เท่ากับ “ 1fr 1fr 1fr ” โดย fr หมายถึง “ เศษส่วน '.
หลังจากคอมไพล์โค้ดด้านบนแล้ว ผลลัพธ์จะเป็นดังนี้:
ผลลัพธ์แสดงว่า divs กำลังปรับขนาดตัวเองตามขนาดหน้าจอที่มีสัดส่วนเท่ากัน
ขั้นตอนที่ 5: แบบสอบถามสื่อ
การใช้คำค้นหาสื่อเพื่อสร้างการออกแบบที่ตอบสนองเป็นสิ่งที่ล้าสมัย แต่ถึงกระนั้นเว็บไซต์ส่วนใหญ่ใช้คำค้นหาสื่อ สามารถเพิ่มคิวรีสื่อได้โดยตรงในไฟล์ CSS หลังจากเพิ่มสไตล์เริ่มต้นสำหรับองค์ประกอบ HTML ที่เลือก ข้อความค้นหาสื่อทำให้โค้ดยาวขึ้นเล็กน้อยและยุ่งเหยิง เนื่องจากผู้พัฒนาจำเป็นต้องใส่โค้ดสำหรับแต่ละขนาดหน้าจอแยกกัน
ตัวอย่างเช่น ดูข้อมูลโค้ดด้านล่าง:
@ สื่อ หน้าจอและ ( นาที- ความกว้าง : 640px ) {.ส่วนประกอบ {
พื้นหลัง- สี : ฟอเรสต์กรีน;
}
}
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก ให้ตั้งค่าคิวรีสื่อที่ใช้คุณสมบัติ CSS กับคลาสองค์ประกอบที่เลือก ' ส่วนประกอบ ” เมื่อความกว้างของขนาดหน้าจอมากกว่า “ 640px '.
- ถัดไป เลือก “component class และตั้งค่าของ “ ป่าไม้เขียวขจี ” สำหรับ “ สีพื้นหลัง ' คุณสมบัติ.
.ส่วนประกอบ {
พื้นหลัง- สี : ดอดเจอร์บลู;
}
}
จากนั้นสำหรับข้อมูลโค้ดด้านบน:
- ตั้งค่าคิวรีสื่อเพื่อใช้สไตล์เมื่อขนาดความกว้างเล็กกว่า “ 1000px '.
- ตอนนี้ เลือก “ ส่วนประกอบ ” class และให้ค่าเป็น “ ดอดเจอร์บลู ” สำหรับ “ สีพื้นหลัง ' คุณสมบัติ:
หลังจากรันโค้ดด้านบน ผลลัพธ์จะมีลักษณะดังนี้:
ผลลัพธ์แสดงว่าแบบสอบถามสื่อกำลังเปลี่ยนพื้นหลังตามขนาดหน้าจอ นอกจากนี้ยังสามารถใช้ขนาดแบบอักษร ความกว้าง ความสูง และคุณสมบัติ CSS อื่นๆ ได้โดยทำตามรูปแบบเดียวกัน
ขนาดหน้าจอเบรกพอยต์ที่เป็นไปได้ในการพิจารณาขณะใช้คิวรีมีเดียคือ:
- สำหรับ ' เล็ก ” ขนาดหน้าจอ กำหนดความกว้างให้เล็กกว่า “ 640px '.
- สำหรับ ' ปานกลาง ” ขนาดหน้าจอวิวพอร์ต ความกว้างระหว่าง “ 641px ' และ ' 1007px '.
- สำหรับ ' ใหญ่ ” ขนาดหน้าจอ กำหนดความกว้างเป็น “ 1008px ” หรือมากกว่านั้น
บทสรุป
ในการสร้างการออกแบบเว็บไซต์ที่ตอบสนอง ผู้พัฒนาจำเป็นต้องเพิ่ม “ วิวพอร์ต <เมตา> ” แท็กใน “ <หัว> ” ส่วนแท็ก ถัดไป ใช้ปุ่ม “ เฟล็กซ์บ็อกซ์ ' และ ' ตาราง เค้าโครง โมดูลเค้าโครงเหล่านี้ช่วยสร้างการออกแบบที่ตอบสนอง ในที่สุด “ แบบสอบถามสื่อ ” ช่วยนักพัฒนาในการจัดรูปแบบเว็บไซต์เดียวกันในเวอร์ชันต่างๆ สำหรับขนาดหน้าจอที่แตกต่างกัน บทความนี้ได้แสดงขั้นตอนในการสร้างการออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์