วิธีการสร้างเว็บไซต์สำหรับมือถือที่ปรับเปลี่ยนได้ใน AJAX สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - dummies

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

CSS3 มีคุณลักษณะใหม่ที่เรียกว่า media queries, ซึ่งช่วยให้คุณสามารถระบุประเภทสื่อและกำหนดลักษณะต่างๆของจอแสดงผลได้ คุณสามารถใช้ข้อกำหนดนี้เพื่อสร้างชุดย่อยของ CSS ที่ควรใช้เมื่อเบราว์เซอร์ตรวจพบประเภทหรือขนาดของการแสดงผล

ระบุชนิดของสื่อ

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

ตัวอย่างเช่นรหัสต่อไปนี้จะระบุขนาดตัวอักษรเมื่อผู้ใช้พิมพ์เอกสาร:

@media print {body {font-size: 10pt;}}

CSS นี้สามารถฝังลงใน CSS ทั่วไปได้ เอกสาร แต่ควรวางไว้ที่ส่วนท้ายของเอกสารเนื่องจากจะมีข้อยกเว้นกฎทั่วไป คุณสามารถวางโค้ด CSS ได้มากเท่าที่ต้องการภายในองค์ประกอบ @media แต่คุณควรวางโค้ด CSS ที่เกี่ยวข้องกับสถานการณ์เฉพาะที่คุณสนใจเท่านั้น

วิธีเพิ่มรอบคัดเลือก

นอกเหนือจากการระบุประเภทสื่อแล้ว @media rule ยังมีเคล็ดลับที่มีประสิทธิภาพอีกมากมาย คุณสามารถใช้เงื่อนไขพิเศษที่มีคุณสมบัติเหมาะสมกับสื่อ

เมื่อเบราเซอร์กว้างกว่า 500 พิกเซลคุณจะเห็นข้อความสีดำบนพื้นหลังสีขาว แต่ทำให้หน้าจอแคบลงและคุณเห็นสิ่งที่น่าสนใจ

narrowBlack html body {สี: ดำ; background-color: white;} @media (ความกว้างสูงสุด: 500px) {body {color: white; background-color: black;}}

การคัดเลือกจากผู้มีสิทธิ์

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

สร้างไซต์ของคุณตามปกติ

1. นี่เป็นที่เดียวที่ทำให้เนื้อหา "แยกเนื้อหาจากรูปแบบ" ทั้งหมดออกไปจริงๆ HTML เดียวกันจะมีสองรูปแบบที่แตกต่างกัน

   ใช้สไตล์ CSS ในลักษณะปกติ

2. สร้างสไตล์มาตรฐานของคุณตามปกติ - ตอนนี้ให้ฝังสไตล์ในหน้าเว็บที่มีแท็กสไตล์หลักของคุณควรจัดการกับกรณีที่พบบ่อยที่สุด (โดยปกติจะเป็นเดสก์ท็อปขนาดเต็ม)

   สร้างกฎ @media

3. กฎ CSS @media ควรไปที่ส่วนท้าย CSS ตามปกติ

   ตั้งค่าความกว้างสูงสุด: 500px รอบคัดเลือก

4. ตัวคัดกรองนี้บ่งชี้ว่ากฎภายในเซ็กเมนต์นี้จะใช้ได้เฉพาะเมื่อความกว้างของหน้าจอมีขนาดเล็กกว่า 500 พิกเซลเท่านั้น

   วางกฎกรณีพิเศษภายในชุดรูปแบบใหม่

5. กฎ CSS ใด ๆ ที่คุณกำหนดภายในกฎ @media จะเปิดใช้งานหากตัวคั่นเป็นจริง ใช้กฎเหล่านี้เพื่อแทนที่ CSS ที่มีอยู่ โปรดทราบว่าคุณไม่จำเป็นต้องกำหนดทุกอย่างใหม่ เพียงจัดหากฎที่เหมาะสมในบริบทเฉพาะของคุณ

   เพิ่มวิวพอร์ต

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

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

ถ้าความกว้างไม่เกิน 500 พิกเซลการประเมินความกว้างสูงสุด: 500px จะได้รับการประเมินเป็น true และรหัส CSS ทั้งหมดภายในส่วน @media ถูกเปิดใช้งาน เบราเซอร์จะจัดเก็บชุด CSS ทั้งสองไว้และใช้ CSS ที่ถูกต้องตามสถานะของกฎ