โฆษณา AMPHTML ไม่รองรับฟีเจอร์การปรับเปลี่ยนตามอุปกรณ์ โฆษณาวิดีโอ, GIF แบบเคลื่อนไหว และโฆษณาแบบรูปภาพใช้เลย์เอาต์หลายขนาดได้
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์จะใช้เลย์เอาต์แบบยืดหยุ่นซึ่งปรับเปลี่ยนไปตามการวางแนวหรือขนาดต่างๆ ของวิวพอร์ต เพื่อให้คุณไม่ต้องสร้างหลายเลย์เอาต์ Google Web Designer มีเครื่องมือมากมายให้คุณสร้างการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
เอกสารของคุณควรมีขนาดขั้นต่ำเท่ากับหน้าที่ปรับเปลี่ยนตามอุปกรณ์ นอกจากนี้ คุณยังสร้างเลย์เอาต์แบบไหลได้โดยกําหนดขนาดและตําแหน่งของออบเจ็กต์เป็นเปอร์เซ็นต์ หากต้องการปรับแต่งองค์ประกอบแต่ละรายการสําหรับขนาดหรือช่วงขนาดต่างๆ ของวิวพอร์ต ให้ใช้กฎของสื่อ
โฆษณาแบบรูปภาพไม่สามารถปรับเปลี่ยนตามอุปกรณ์ได้ แต่จะใช้เวิร์กโฟลว์ที่ปรับเปลี่ยนตามอุปกรณ์ในเลย์เอาต์หลายขนาดเพื่อส่งออกเป็นขนาดต่างๆ จากเอกสารฉบับเดียวได้
ขนาดของหน้าที่ปรับเปลี่ยนตามอุปกรณ์
ทําให้เอกสารโดยรวมปรับเปลี่ยนตามอุปกรณ์
ควรตั้งค่าเอกสารที่ปรับเปลี่ยนตามอุปกรณ์ให้มีความกว้างและความยาวของหน้าเป็น 100% เพื่อแสดงให้เต็มพื้นที่ทั้งหมดของหน้าจอ
-
เอกสารที่มีอยู่: ในแผงปรับเปลี่ยนตามอุปกรณ์ ให้เลือกช่องทําเครื่องหมายเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์
-
ไฟล์ใหม่: ในกล่องโต้ตอบไฟล์ใหม่ ให้เลือกช่องทําเครื่องหมายเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์เมื่อระบุขนาด (ตัวเลือกนี้ใช้ได้กับไฟล์บางประเภทเท่านั้น)
คุณใช้เลย์เอาต์แบบไหลและกฎของสื่อเพื่อทําให้เนื้อหาในหน้าเว็บปรับเปลี่ยนตามอุปกรณ์ได้
เลย์เอาต์แบบไหล
ขนาดและตําแหน่งแบบเปอร์เซ็นต์
ภาพรวมการสร้างเนื้อหาแบบเป็นเปอร์เซ็นต์
นอกจากขนาดของหน้าแล้ว คุณยังระบุขนาดและตำแหน่งขององค์ประกอบต่างๆ โดยใช้เปอร์เซ็นต์แทนพิกเซลได้ด้วย เปอร์เซ็นต์จะรักษาขนาดและการปรับแนวขององค์ประกอบให้สัมพันธ์กับการเปลี่ยนแปลงของคอนเทนเนอร์ระดับบนสุดเสมอ
เมื่อคุณปรับแนวองค์ประกอบ ตัวเลือกเลย์เอาต์แบบไหลสำหรับเครื่องมือการปรับแนวและการเผยแพร่จะช่วยให้คุณกำหนดตำแหน่งแบบเปอร์เซ็นต์ได้โดยง่าย
กฎของสื่อ
ลบล้างแอตทริบิวต์และรูปแบบ CSS สําหรับการวางแนวและขนาดต่างๆ
กฎของสื่อช่วยให้เอกสารของคุณตรวจจับขนาดและการวางแนวของวิวพอร์ตได้ ตลอดจนใช้รูปแบบและแอตทริบิวต์ต่างๆ ได้อย่างเหมาะสม ตัวอย่างเช่น เนื้อหาในโทรศัพท์อาจแสดงเป็นแบบคอลัมน์เดียว ขณะที่ในแท็บเล็ตอาจแสดงเนื้อหาเดียวกันเป็นแบบ 2 คอลัมน์ การเปลี่ยนแปลงเหล่านี้ (ซึ่งเรียกว่าการลบล้าง) จะเกิดขึ้นกับขนาดหรือช่วงขนาดที่กำหนดไว้เท่านั้น
คุณเลือกสลับระหว่างกฎชุดต่างๆ ได้ในแผงปรับเปลี่ยนตามอุปกรณ์
- กฎเริ่มต้น: เลือกแก้ไขเอกสารฐานเมื่อทำการเปลี่ยนแปลงชุดรูปแบบเริ่มต้นหรือเมื่อทำการเปลี่ยนแปลงที่ใช้กับวิวพอร์ตทุกขนาด (เช่น การเพิ่มหรือลบเนื้อหา คอมโพเนนต์ หรือเหตุการณ์)
- กฎของสื่อ: เลือกขนาดหรือช่วงขนาดที่ต้องการเพื่อลบล้างรูปแบบและแอตทริบิวต์เริ่มต้นสำหรับขนาดวิวพอร์ตนั้นๆ
เมื่อเลือกกฎของสื่อไว้ คุณอาจกำหนดรูปแบบและแอตทริบิวต์ที่ใช้ได้กับขนาดหรือช่วงขนาดดังกล่าวเท่านั้น ตัวอย่างเช่น คุณอาจปรับเปลี่ยนตำแหน่ง ขนาด แหล่งที่มา ระดับการเข้าถึง หรือภาพเคลื่อนไหวขององค์ประกอบ Google Web Designer ยังให้คุณลบล้างเนื้อหาข้อความ การตั้งค่าการปรับข้อความให้พอดี และคุณสมบัติของคอมโพเนนต์ได้ด้วย
ดูข้อมูลเพิ่มเติมเกี่ยวกับกฎของสื่อและการลบล้าง