AMP mendukung kueri media & kueri elemen, juga dilengkapi dengan cara yang canggih untuk mengontroltata letak masing-masing elemen. Atribut layout mempermudah pengerjaan dan pembuatan desain yang benar-benar responsif dibandingkan dengan hanya menggunakan CSS.

Memudahkan pembuatan gambar yang responsif

Buat gambar yang responsif dengan menetapkan width dan height, menyetel tata letak ke responsive, dan menunjukkan dengan srcset aset gambar mana yang digunakan berdasarkan berbagai ukuran layar:

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

Elemen amp-img ini otomatis menyesuaikan lebar elemen penampungnya, dan tingginya otomatis disetel ke rasio aspek yang ditentukan oleh lebar dan tinggi yang diberikan. Cobalah dengan mengubah ukuran jendela browser ini:

Atribut tata letak

Atribut layout memudahkan Anda mengontrol masing-masing elemen terkait perenderan elemen di layar. Kebanyakan perenderan mungkin dapat dilakukan dengan CSS saja - namun hal tersebut lebih sulit dilakukan, dan memerlukan banyak cara. Sebagai gantinya, gunakan atribut layout.

Nilai yang didukung untuk atribut layout

Nilai berikut dapat digunakan di atribut layout:

Jenis tata letak Lebar/tinggi yang diperlukan Perilaku
nodisplay Tidak Elemen tidak ditampilkan. Tata letak ini dapat diterapkan untuk setiap elemen AMP. Komponen tidak memerlukan ruang di layar seakan-akan gaya tampilannya tidak ada. Diasumsikan bahwa elemen dapat ditampilkan dengan sendirinya pada tindakan pengguna, misalnya, amp-lightbox.
fixed Ya Elemen memiliki lebar dan tinggi tetap tanpa ada responsivitas yang didukung. Satu-satunya pengecualian adalah elemen amp-pixel dan amp-audio .
responsive Ya Ukuran elemen ditentukan oleh lebar elemen penampungnya, dan ukuran tingginya otomatis diubah ke rasio aspek yang diberikan oleh atribut lebar dan tinggi. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk amp-img, amp-video . Ruang yang tersedia bergantung pada elemen induk dan dapat disesuaikan menggunakan max-width CSS.
fixed-height Tinggi saja Elemen mengambil ruang yang tersedia, namun tingginya tetap tidak berubah. Tata letak ini berfungsi dengan baik untuk elemen seperti amp-carousel yang menyertakan konten dengan posisi horizontal. Atribut width tidak boleh ada atau harus sama dengan auto.
fill Tidak Elemen mengambil ruang yang tersedia, baik lebar dan tingginya. Dengan kata lain, tata letak elemen pengisian cocok dengan elemen induknya.
container Tidak Elemen mengizinkan elemen turunannya menentukan ukurannya, mirip dengan HTML normal div. Komponen ini diasumsikan tidak memiliki tata letak spesifik dengan sendirinya, namun hanya bertindak sebagai penampung. Elemen turunannya dirender dengan segera.
flex-item Tidak Elemen dan elemen lain di dalam elemen induknya mengambil ruang penampung induk yang tersisa, jika elemen induk adalah penampung fleksibel (mis.,display:flex ). Ukuran elemen ditentukan oleh elemen induk dan jumlah elemen lain di dalam elemen induk sesuai dengan tata letak CSS display:flex .

Bagaimana jika lebar dan tinggi tidak ditentukan?

Dalam kasus tertentu, jika width atau height tidak ditetapkan, waktu proses AMP dapat menetapkan nilai tersebut secara default seperti berikut:

  • amp-pixel: Lebar dan tinggi ditetapkan sebagai default ke 0.
  • amp-audio: Lebar dan tinggi default diperkirakan dari browser.

Bagaimana jika atributlayout tidak ditetapkan?

Jika atributlayout tidak ditetapkan, AMP mencoba memperkirakan atau menduga nilai yang sesuai:

Aturan Perkiraan tata letak
height ada dan width tidak ada atau sama denganauto fixed-height
Atribut width atau height ada bersama dengan atribut sizes type: responsive
Atribut width atau height ada fixed
width dan height tidak ada container

Menggunakan kueri media

Kueri media CSS

Gunakan @media untuk mengontrol tampilan dan perilaku tata letak halaman, seperti yang akan Anda lakukan di situs lainnya. Jika jendela browser mengubah ukuran atau orientasi, kueri media akan dievaluasi ulang serta elemen disembunyikan dan ditampilkan berdasarkan hasil yang baru.

Kueri media elemen

Fitur tambahan lain untuk desain responsif yang tersedia di AMP adalah atribut media. Atribut ini dapat digunakan di setiap elemen AMP; cara kerjanya sama dengan kueri media di stylesheet global Anda, namun hanya memengaruhi elemen tertentu pada satu halaman.

Misalnya, di sini kami memiliki 2 gambar dengan kueri media yang bersifat sama.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive">
</amp-img>

Bergantung pada lebar layar, salah satu gambar atau gambar lainnya akan diambil dan dirender.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive">
</amp-img>