Tata letak & kueri media

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:

Lihat demo langsung berdampingan tentang amp-img: Demo Langsung AMP by Example.

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.

Kunjungi halaman Mendemonstrasikan tata letak AMP untuk melihat bagaimana berbagai tata letak merespons perubahan ukuran layar.

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.

Pelajari lebih lanjut cara mengontrol tata letak dengan menerapkan kueri media di Menggunakan kueri media CSS untuk meningkatkan respons.

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="527"
    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="466"
    height="193"
    layout="responsive">
</amp-img>

Written by @Meggin
with contributions from @pbakaus