บทความนี้ได้อธิบายรายละเอียดเกี่ยวกับแนวคิดของเค้าโครงที่ตอบสนองข้อดีและข้อเสียของเค้าโครงที่ตอบสนองแนวคิดการออกแบบและรหัสการใช้งานเฉพาะ มันเป็นบทความที่หายาก ที่นี่เราแนะนำให้เพื่อน 1. เค้าโครงตอบสนองคืออะไร?
เค้าโครงที่ตอบสนองเป็นแนวคิดที่เสนอโดยอีธานมาร์โคทเตในเดือนพฤษภาคม 2010 ในระยะสั้นเว็บไซต์สามารถเข้ากันได้กับหลายเทอร์มินัล - แทนที่จะสร้างเวอร์ชันเฉพาะสำหรับแต่ละเทอร์มินัล
แนวคิดนี้เกิดมาเพื่อแก้ปัญหาการเรียกดูอินเทอร์เน็ตบนมือถือ เค้าโครงที่ตอบสนองสามารถให้ผู้ใช้เทอร์มินัลที่แตกต่างกันด้วยอินเทอร์เฟซที่สะดวกสบายยิ่งขึ้นและประสบการณ์การใช้งานที่ดีขึ้น ยิ่งไปกว่านั้นด้วยความนิยมในปัจจุบันของอุปกรณ์มือถือขนาดใหญ่ในปัจจุบันจึงไม่ได้เป็นการพูดเกินจริงเพื่ออธิบายว่าเป็นแนวโน้มทั่วไป
ในขณะที่นักออกแบบจำนวนมากใช้เทคโนโลยีนี้เราไม่เพียง แต่เห็นนวัตกรรมมากมาย แต่ยังรวมถึงรุ่นที่เกิดขึ้นด้วย
2. ข้อดีและข้อเสียของเค้าโครงตอบสนองคืออะไร? ข้อได้เปรียบ:ความยืดหยุ่นที่แข็งแกร่งในการเผชิญกับอุปกรณ์ความละเอียดที่แตกต่างกัน
สามารถแก้ปัญหาการปรับตัวแบบหลายอุปกรณ์ได้อย่างรวดเร็ว
ข้อบกพร่อง:เข้ากันได้กับอุปกรณ์ต่าง ๆ ภาระงานสูงและประสิทธิภาพต่ำ
รหัสนั้นยุ่งยากและองค์ประกอบที่ซ่อนอยู่และไร้ประโยชน์จะปรากฏขึ้นซึ่งจะเพิ่มเวลาในการโหลด
ในความเป็นจริงนี่เป็นโซลูชันการออกแบบประนีประนอมซึ่งไม่สามารถบรรลุผลลัพธ์ที่ดีที่สุดเนื่องจากอิทธิพลของปัจจัยหลายอย่าง
ในระดับหนึ่งโครงสร้างเค้าโครงดั้งเดิมของเว็บไซต์จะมีการเปลี่ยนแปลงและความสับสนของผู้ใช้จะเกิดขึ้น
3. วิธีการออกแบบเค้าโครงตอบสนอง?1. จะแก้ปัญหาความเข้ากันได้ระหว่างอุปกรณ์ต่าง ๆ ได้อย่างไร?
แบบสอบถามสื่อใน CSS3 สามารถแก้ปัญหานี้ได้
2. คิวรีสื่อสามารถรับค่าใดได้บ้าง?
อุปกรณ์ความกว้างอุปกรณ์-อุปกรณ์แสดงหน้าจอ/อุปกรณ์สัมผัส
แสดงความกว้างและความสูงของหน้าต่าง hegth แสดงอุปกรณ์หน้าจอ/สัมผัส
ทิศทางมือถือของอุปกรณ์แนวนอนหรือแนวตั้ง (แนวตั้ง | Lanscape) และเครื่องพิมพ์ ฯลฯ
อัตราส่วนหน้าจออัตราส่วนอัตราส่วน DOT เมทริกซ์ ฯลฯ
อัตราส่วนอุปกรณ์อุปกรณ์เครื่องพิมพ์เมทริกซ์อัตราส่วนอัตราส่วนอัตราส่วน ฯลฯ ฯลฯ
รายการสีหรือรายการสีดัชนีสีแสดงหน้าจอ
ความละเอียดของอุปกรณ์
3. โครงสร้างไวยากรณ์และการใช้งาน
ไวยากรณ์: @media ชื่ออุปกรณ์เท่านั้น (เลือกเงื่อนไข) ไม่ใช่ (เลือกเงื่อนไข) และ (เงื่อนไขการเลือกอุปกรณ์), อุปกรณ์สอง {srules}
การใช้งาน:
. ตัวอย่างที่ 1: ใช้ @media ในลิงค์:
<link rel = stylesheet type = text /css media = เฉพาะหน้าจอและ (สูงสุด-ความกว้าง: 480px) เฉพาะหน้าจอและ (Max-Device-Width: 480px) href = link.css rel = nofollow ภายนอก />>
เฉพาะในการใช้งานข้างต้นเท่านั้นที่สามารถละเว้นและ จำกัด อยู่ที่จอคอมพิวเตอร์ เงื่อนไขแรกความกว้างสูงสุดหมายถึงความกว้างสูงสุดของอินเตอร์เฟสการเรนเดอร์และเงื่อนไขที่สองสูงสุด-อุปกรณ์ความกว้างหมายถึงความกว้างสูงสุดของอุปกรณ์
ข. ฝัง @media ในสไตล์ชีท:
คัดลอกรหัส