AMP mendukung kueri media & kueri elemen, juga disertai cara bawaan yang canggih untuk mengontrol tata letak masing-masing elemen. Atribut layout mempermudah pembuatan desain yang sepenuhnya responsif dibandingkan jika Anda hanya menggunakan CSS.

Membuat gambar responsif dengan mudah

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

<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 melakukan penyesuaian otomatis dengan lebar elemen penampungnya, dan tingginya otomatis ditetapkan sesuai rasio tinggi lebar yang ditetapkan oleh atribut width dan height yang ditentukan. Cobalah dengan mengubah ukuran jendela browser ini:

Atribut layout

Atribut layout memberi Anda kontrol per-elemen yang mudah terkait rendering elemen di layar. Banyak dari hal ini dapat dilakukan dengan CSS murni – tapi prosesnya jauh lebih sulit, dan membutuhkan banyak modifikasi. Sebagai gantinya, gunakan atribut layout.

Nilai yang didukung untuk atribut layout

Nilai berikut dapat digunakan untuk atribut layout:

Jenis tata letak Lebar/
tinggi diperlukan
Perilaku
nodisplay Tidak Elemen tidak ditampilkan. Tata letak ini dapat diterapkan ke setiap elemen AMP. Komponen tersebut tidak menggunakan ruang sama sekali di layar karena tidak memiliki gaya tampilan. Diasumsikan bahwa elemen ini dapat tampil dengan sendirinya di tindakan pengguna, misalnya, amp-lightbox.
fixed Ya Elemen memiliki lebar dan tinggi yang tetap tetapi tidak mendukung responsivitas. Satu-satunya pengecualian adalah elemen amp-pixel dan amp-audio.
responsive Ya Elemen disesuaikan dengan lebar elemen penampungnya dan tingginya otomatis diubah sesuai rasio tinggi lebar yang ditentukan oleh atribut width dan height. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk amp-img dan amp-video. Ruang yang tersedia bergantung pada elemen induk dan juga dapat disesuaikan menggunakan CSS max-width.

Catatan: Elemen dengan "layout=responsive" tidak memiliki ukuran intrinsik. Ukuran elemen ini ditentukan dari elemen penampungnya. Untuk memastikan elemen AMP Anda ditampilkan, Anda harus menetapkan lebar dan tinggi untuk elemen penampungnya. Jangan tetapkan "display:table" pada elemen penampung karena ini akan menggantikan tampilan elemen AMP, yang membuat elemen AMP menjadi tidak terlihat.

fixed-height Hanya tinggi Elemen menempati ruang yang disediakan, tapi tingginya tidak diubah. Tata letak ini berfungsi dengan baik untuk elemen seperti amp-carousel yang menggunakan konten yang diposisikan secara horizontal. Atribut width harus tidak ada atau sama dengan auto.
fill Tidak Elemen menempati ruang yang disediakan, baik untuk tinggi maupun lebarnya. Dengan kata lain, tata letak elemen fill (isian) sesuai dengan induknya. Agar elemen mengisi penampung induknya, pastikan penampung induk menetapkan `position:relative` atau `position:absolute`.
container Tidak Elemen memungkinkan turunannya menentukan ukurannya, sama seperti div HTML biasa. Komponen diasumsikan tidak memiliki tata letak spesifik, melainkan hanya berfungsi sebagai penampung. Turunannya dirender dengan seketika.
flex-item Tidak Elemen dan elemen lain dalam induknya menempati ruang yang tersisa di penampung induk jika induk tersebut merupakan penampung fleksibel (artinya, display:flex). Ukuran elemen ditentukan oleh elemen induk dan jumlah elemen lain yang berada di dalam induk berdasarkan tata letak CSS display:flex.
intrinsic Ya Elemen ini menempati ruang yang disediakan untuknya dan ukuran tingginya otomatis diubah sesuai rasio tinggi lebar yang ditentukan oleh atribut width dan height hingga mencapai ukuran yang wajar untuk elemen itu atau mencapai batasan CSS (misalnya max-width). Atribut width dan height harus ada. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk amp-img, amp-carousel, dll. Ruang yang tersedia bergantung pada elemen induk dan juga dapat disesuaikan menggunakan CSS max-width. Tata letak ini berbeda dengan responsive karena memiliki tinggi dan lebar intrinsik. Hal ini terlihat jelas pada elemen mengambang di mana tata letak responsive akan merender 0x0, sedangkan tata letak intrinsic akan menyusut ke ukuran yang lebih kecil dari ukuran wajarnya atau ke batas ukuran CSS.

Bagaimana jika atribut width dan height tidak ditentukan?

Dalam beberapa kasus, jika width atau height tidak ditentukan, AMP runtime dapat menetapkan nilai berikut sebagai default:

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

Bagaimana jika atribut layout tidak ditentukan?

Jika atribut layout tidak ditentukan, AMP akan mencoba menyimpulkan atau menebak nilai yang sesuai:

Aturan Tata letak yang disimpulkan
Atribut height ada tetapi atribut width tidak ada atau sama dengan auto fixed-height
Atribut width atau height ada beserta atribut sizes responsive
Atribut width atau height ada fixed
Atribut 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 berubah ukuran atau orientasi, kueri media akan dievaluasi ulang dan elemen disembunyikan atau ditampilkan berdasarkan hasil baru.

Kueri media elemen

Salah satu fitur tambahan untuk desain responsif yang tersedia di AMP adalah atribut media. Atribut ini dapat digunakan di setiap elemen AMP; cara kerjanya mirip dengan kueri media di stylesheet global, tapi hanya memengaruhi elemen tertentu pada satu halaman.

Misalnya, di sini terdapat 2 gambar dengan kueri media yang berdiri sendiri.

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

Tergantung lebar layarnya, salah satu gambar akan diambil dan dirender.

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