อีกปัจจัยหนึ่งที่นำไปสู่การมุ่งเน้นไปที่การออกแบบที่ตอบสนองมือถือเป็นหลักก็คือคนส่วนใหญ่เข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์มือถือของตน ซึ่งคิดเป็น 60% ในขณะที่มีคนเพียง 20% เท่านั้นที่ใช้อินเทอร์เน็ตบนเดสก์ท็อป
บทความนี้จะครอบคลุมคำแนะนำในการสร้างการออกแบบที่ตอบสนองต่อมือถือเป็นอันดับแรก
วิธีการตั้งค่าการออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก
การออกแบบที่ตอบสนองไม่ว่าจะเป็นการตอบสนองแบบมือถือเป็นหลักหรือสำหรับหน้าจอขนาดใหญ่สามารถสร้างขึ้นได้โดยทำตามวิธีการด้านล่าง:
- สร้างการออกแบบที่ตอบสนองต่อมือถือเป็นอันดับแรก
- ใช้/ใช้ประโยชน์จากการสืบค้นสื่อเพื่อพัฒนา/สร้างการออกแบบที่ตอบสนองสำหรับหน้าจอขนาดใหญ่
วิธีที่ 1: สร้างการออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก
ขั้นแรก ให้เริ่มต้นด้วยการสร้างแนวทางการออกแบบที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก เพื่อจุดประสงค์ดังกล่าว ให้ทำตามคำแนะนำแบบขั้นตอนด้านล่าง
ขั้นตอนที่ 1: สร้างโครงสร้าง HTML
ขั้นแรก สร้างโครงสร้าง HTML และเพิ่ม ' บูทสแตรป ' ใน <หัว> ส่วน. หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสไตล์ชีทในส่วน HTML ให้คลิกที่นี่ ลิงค์ . หลังจากสร้างโครงสร้างเว็บไซต์ขั้นพื้นฐานแล้ว ได้แก่ <ไม่มี> , <ส่วนหัว> และ <ส่วนท้าย> ตามที่ระบุด้านล่าง:
< ร่างกาย ><ส่วนหัว>
<ไม่มี>
< ul >
< ที่ >< ก href = #' > บ้าน < / ก >< / ที่ >
< ที่ >< ก href = #' > เกี่ยวกับเรา < / ก >< / ที่ >
< ที่ >< ก href = #' > บริการของเรา < / ก >< / ที่ >
< ที่ >< ก href = #' > ติดต่อเรา < / ก >< / ที่ >
< / ul >
< / ไม่>
< / ส่วนหัว>
<หลัก>
<ส่วน>
< h1 > ยินดีต้อนรับสู่คำแนะนำ Linux < / h1 >
< พี > เว็บไซต์บทช่วยสอน < / พี >
< / ส่วน>
< / หลัก>
<ส่วนท้าย>
< พี > ลิขสิทธิ์คำแนะนำ Linux < / พี >
< / ส่วนท้าย>
< / ร่างกาย >
ขั้นตอนที่ 2: ใช้ CSS
ในส่วนของเนื้อหา ให้ตั้งค่า “ ตระกูลแบบอักษร ' ถึง ' แซนเซอริฟ '. ตั้งค่าช่องว่างภายใน ระยะขอบ และสีพื้นหลังด้วย หลังจากนั้นใช้ CSS ในส่วนหัว ส่วนท้าย และการนำทาง:
ร่างกาย {ตระกูลแบบอักษร : : แซนเซอริฟ ;
ระยะขอบ : : 0 ;
การขยายความ : : 0 ;
สีพื้นหลัง : : #808080 ;
}
หัวข้อ {
สีพื้นหลัง : : สีม่วง ;
สี : : สีขาว ;
การขยายความ : : 8px ;
}
เยี่ยมเลย {
รายการสไตล์ประเภท : : ไม่มี ;
การขยายความ : : 0 ;
ระยะขอบ : : 0 ;
}
เรือของพวกเขา {
ระยะขอบ : : 4px 0 ;
}
นาฟ อุล ลี อา {
สี : : สีขาว ;
การตกแต่งข้อความ : : ไม่มี ;
}
หลัก {
การขยายความ : : 18px ;
}
ส่วนท้าย {
สีพื้นหลัง : : สีชมพู ;
สี : : สีขาว ;
จัดข้อความ : : ศูนย์ ;
การขยายความ : : 8px ;
}
ดังที่สามารถสังเกตได้ ผลลัพธ์ด้านล่างนี้ยืนยันว่าการออกแบบนั้นตอบสนองกับมือถือเป็นอันดับแรก:
วิธีที่ 2: ใช้ Media Queries เพื่อสร้างการออกแบบที่ตอบสนองสำหรับหน้าจอขนาดใหญ่
การออกแบบข้างต้นสามารถสร้างขึ้นสำหรับหน้าจอขนาดใหญ่ เช่น แท็บเล็ตและเดสก์ท็อป เพื่อจุดประสงค์ดังกล่าว ผู้ใช้จำเป็นต้องรวมการสืบค้นสื่อใน CSS ความกว้างของแท็บเล็ตคือ “ 786px ” และสำหรับเดสก์ท็อปคือ “ 1024px '.
หากต้องการใช้คำสั่งสื่อ ขั้นแรกให้รวม ' @สื่อ ” ในไฟล์ CSS หลังจากนั้น ให้ระบุคุณสมบัติ “min-width” เป็น “ 768px '. ซึ่งหมายความว่าเมื่อใดก็ตามที่ถึงขนาดหน้าจอขั้นต่ำ “768px” หรือสูงกว่า CSS ต่อไปนี้จะถูกนำมาใช้:
@สื่อ ( ความกว้างขั้นต่ำ : : 768px ) {ร่างกาย {
ขนาดตัวอักษร : : 14px ;
}
หัวข้อ {
การขยายความ : : 18px ;
}
เยี่ยมเลย {
แสดง : : ดิ้น ;
}
เรือของพวกเขา {
ระยะขอบ : : 0 8px ;
}
หลัก {
แสดง : : ดิ้น ;
ปรับเนื้อหา : : ช่องว่างระหว่าง ;
จัดรายการ : : ศูนย์ ;
}
ส่วนท้าย {
การขยายความ : : 18px ;
}
}
ผลลัพธ์ด้านล่างนี้แสดงให้เห็นว่าการออกแบบยังตอบสนองบนหน้าจอขนาดใหญ่อีกด้วย:
บทสรุป
หากต้องการตั้งค่าการออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นหลัก ขั้นแรกให้สร้างโครงสร้าง HTML และเพิ่มวิวพอร์ต หลังจากนั้นให้ลิงก์ไฟล์ CSS ในแท็ก head จากนั้นใช้ CSS ตามการออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นหลัก นอกจากนี้ ผู้ใช้ยังสามารถเพิ่มแบบสอบถามสื่อ CSS เพื่อปรับเปลี่ยนบนอุปกรณ์มือถือได้ บทความนี้ได้สาธิตขั้นตอนโดยละเอียดในการตั้งค่าการออกแบบที่ตอบสนองกับมือถือเป็นอันดับแรก