ภาพรวมของเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

โฆษณา AMPHTML ไม่รองรับฟีเจอร์การปรับเปลี่ยนตามอุปกรณ์ โฆษณาวิดีโอ, GIF แบบเคลื่อนไหว และโฆษณาแบบรูปภาพใช้เลย์เอาต์หลายขนาดได้

การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์จะใช้เลย์เอาต์แบบยืดหยุ่นซึ่งปรับเปลี่ยนไปตามการวางแนวหรือขนาดต่างๆ ของวิวพอร์ต เพื่อให้คุณไม่ต้องสร้างหลายเลย์เอาต์ Google Web Designer มีเครื่องมือมากมายให้คุณสร้างการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

เอกสารของคุณควรมีขนาดขั้นต่ำเท่ากับหน้าที่ปรับเปลี่ยนตามอุปกรณ์ นอกจากนี้ คุณยังสร้างเลย์เอาต์แบบไหลได้โดยกําหนดขนาดและตําแหน่งของออบเจ็กต์เป็นเปอร์เซ็นต์ หากต้องการปรับแต่งองค์ประกอบแต่ละรายการสําหรับขนาดหรือช่วงขนาดต่างๆ ของวิวพอร์ต ให้ใช้กฎของสื่อ

โฆษณาแบบรูปภาพไม่สามารถปรับเปลี่ยนตามอุปกรณ์ได้ แต่จะใช้เวิร์กโฟลว์ที่ปรับเปลี่ยนตามอุปกรณ์ในเลย์เอาต์หลายขนาดเพื่อส่งออกเป็นขนาดต่างๆ จากเอกสารฉบับเดียวได้

ขนาดของหน้าที่ปรับเปลี่ยนตามอุปกรณ์

ทําให้เอกสารโดยรวมปรับเปลี่ยนตามอุปกรณ์

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

  • เอกสารที่มีอยู่: ในแผงปรับเปลี่ยนตามอุปกรณ์ ให้เลือกช่องทําเครื่องหมายเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

  • ไฟล์ใหม่: ในกล่องโต้ตอบไฟล์ใหม่ ให้เลือกช่องทําเครื่องหมายเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์เมื่อระบุขนาด (ตัวเลือกนี้ใช้ได้กับไฟล์บางประเภทเท่านั้น)

คุณใช้เลย์เอาต์แบบไหลและกฎของสื่อเพื่อทําให้เนื้อหาในหน้าเว็บปรับเปลี่ยนตามอุปกรณ์ได้

เลย์เอาต์แบบไหล

ขนาดและตําแหน่งแบบเปอร์เซ็นต์

ภาพรวมการสร้างเนื้อหาแบบเป็นเปอร์เซ็นต์

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

เมื่อคุณปรับแนวองค์ประกอบ ตัวเลือกเลย์เอาต์แบบไหลสำหรับเครื่องมือการปรับแนวและการเผยแพร่จะช่วยให้คุณกำหนดตำแหน่งแบบเปอร์เซ็นต์ได้โดยง่าย

กฎของสื่อ

ลบล้างแอตทริบิวต์และรูปแบบ CSS สําหรับการวางแนวและขนาดต่างๆ

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

คุณเลือกสลับระหว่างกฎชุดต่างๆ ได้ในแผงปรับเปลี่ยนตามอุปกรณ์

  • กฎเริ่มต้น: เลือกแก้ไขเอกสารฐานเมื่อทำการเปลี่ยนแปลงชุดรูปแบบเริ่มต้นหรือเมื่อทำการเปลี่ยนแปลงที่ใช้กับวิวพอร์ตทุกขนาด (เช่น การเพิ่มหรือลบเนื้อหา คอมโพเนนต์ หรือเหตุการณ์)
  • กฎของสื่อ: เลือกขนาดหรือช่วงขนาดที่ต้องการเพื่อลบล้างรูปแบบและแอตทริบิวต์เริ่มต้นสำหรับขนาดวิวพอร์ตนั้นๆ

เมื่อเลือกกฎของสื่อไว้ คุณอาจกำหนดรูปแบบและแอตทริบิวต์ที่ใช้ได้กับขนาดหรือช่วงขนาดดังกล่าวเท่านั้น ตัวอย่างเช่น คุณอาจปรับเปลี่ยนตำแหน่ง ขนาด แหล่งที่มา ระดับการเข้าถึง หรือภาพเคลื่อนไหวขององค์ประกอบ Google Web Designer ยังให้คุณลบล้างเนื้อหาข้อความ การตั้งค่าการปรับข้อความให้พอดี และคุณสมบัติของคอมโพเนนต์ได้ด้วย

ดูข้อมูลเพิ่มเติมเกี่ยวกับกฎของสื่อและการลบล้าง

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร
ค้นหา
ล้างการค้นหา
ปิดการค้นหา
เมนูหลัก
6682888440674539770
true
ค้นหาศูนย์ช่วยเหลือ
true
true
true
true
true
5050422
false
false