Bố cục & truy vấn đa phương tiện
AMP hỗ trợ cả 2 loại truy vấn đa phương tiện & truy vấn yếu tố, cùng với một phương thức tích hợp sẵn mạnh mẽ để kiểm soát bố cục của các yếu tố riêng lẻ. Thuộc tính layout (bố cục) cho phép làm việc và tạo các thiết kế hoàn toàn tương thích một cách dễ dàng hơn rất nhiều so với chỉ sử dụng CSS.
Dễ dàng tạo ảnh tương thích
Tạo các ảnh tương thích bằng cách quy định width và height, đặt bố cục là responsive (tương thích), và chỉ báo với srcset rằng tài sản ảnh nào sẽ được sử dụng dựa trên các kích cỡ màn hình khác nhau:
<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>
Yếu tố amp-img này sẽ tự động vừa với chiều rộng của yếu tố container của nó, và chiều cao của nó được thiết lập tự động theo tỷ lệ khung hình được xác định bởi chiều rộng và chiều cao đã cho. Hãy thử ngay bằng cách đổi kích cỡ cửa sổ trình duyệt này:
amp-img: Live Demos on AMP By Example. Thuộc tính layout (bố cục)
Thuộc tính layout (bố cục) cho phép bạn kiểm soát dễ dàng, chi tiết cách render yếu tố trên màn hình. Rất nhiều thao tác trong số này cũng có thể được thực hiện chỉ với CSS – nhưng chúng sẽ khó hơn rất nhiều và cần nhiều thủ thuật. Thay vào đó, hãy sử dụng thuộc tính layout (bố cục).
Các giá trị được hỗ trợ cho thuộc tính layout (bố cục)
Các giá trị sau có thể được sử dụng trong thuộc tính layout (bố cục):
| Loại bố cục | Chiều rộng/ cần chiều cao | Hành vi |
|---|---|---|
nodisplay | Không | Yếu tố không được hiển thị. Bố cục này có thể được áp dụng cho mọi yếu tố AMP. Thành phần này không chiếm diện tích trên màn hình bởi nó không có phong cách hiển thị. Yếu tố này có thể được hiển thị tùy theo hành động của người dùng, ví dụ như, amp-lightbox. |
fixed | Có | Yếu tố này có một chiều rộng và chiều cao cố định, và không hỗ trợ tương thích. Các ngoại lệ duy nhất là các yếu tố amp-pixel và amp-audio. |
responsive | Có | Yếu tố được đổi kích cỡ theo chiều rộng của yếu tố container và tự đổi chiều cao của nó theo tỷ lệ khung hình được xác định bởi thuộc tính chiều rộng và chiều cao. Bố cục này hoạt động tốt cho hầu hết các yếu tố AMP, bao gồm amp-img, amp-video. Không gian có sẵn phụ thuộc vào yếu tố cha và cũng có thể được tùy chỉnh sử dụng CSS max-width.LƯU Ý: Các yếu tố có |
fixed-height | Chỉ chiều cao | Yếu tố sẽ chiếm diện tích dành cho nó nhưng không thay đổi chiều cao. Bố cục này hoạt động tốt cho các yếu tố như amp-carousel liên quan đến nội dung được đặt ngang. Thuộc tính width (chiều rộng) phải không được quy định hoặc bằng auto (tự động). |
fill | Không | Yếu tố sẽ chiếm diện tích dành cho nó, cả chiều rộng lẫn chiều cao. Nói cách khác, bố cục của một yếu tố fill (lấp đầy) sẽ khớp với cha của nó. Để một yếu tố có thể lấp đầy container cha của nó, hãy đảm bảo container cha quy định `position:relative` (vị trí:tương đối) hoặc `position:absolute` (vị trí:tuyệt đối). |
container | Không | Yếu tố cho phép con của nó tự quy định kích cỡ, như một thẻ div HTML thông thường. Thành phần này được giả sử là không có một bố cục cụ thể, mà hoạt động như một container. Các con của nó sẽ được render ngay lập tức. |
flex-item | Không | Yếu tố và các yếu tố khác trong cha của nó sẽ chiếm diện tích còn lại của container cha khi cha là một container linh hoạt (nghĩa là, display:flex (hiển thị:linh hoạt)). Kích cỡ của yếu tố được xác định bởi yếu tố cha và số yếu tố khác bên trong cha theo bố cục CSS display:flex (hiển thị:linh hoạt). |
intrinsic | Có | Yếu tố này chiếm dịch tích dành cho nó và tự động đổi kích cỡ chiều cao của nó theo tỷ lệ khung hình được quy định bởi thuộc tính width (chiều rộng) và height (chiều cao) cho đến khi nó đạt kích cỡ tự nhiên của yếu tố hoặc đạt một giới hạn CSS (ví dụ như max-width). Các thuộc tính width (chiều rộng) và height (chiều cao) phải được quy định. Bố cục này hoạt động tốt cho hầu hết các yếu tố AMP, bao gồm amp-img, amp-carousel, v.v. Không gian có sẵn phụ thuộc vào yếu tố cha và cũng có thể được tùy chỉnh sử dụng CSS max-width. Bố cục này khác với bố cục responsive (tương thích) bởi nó có một chiều cao và chiều rộng thực chất. Điều này được thể hiện rõ nhất trong một yếu tố nổi mà ở đó bố cục responsive (tương thích) sẽ render 0x0 và một bố cục intrinsic (thực chất) sẽ tăng lên đến ngưỡng nhỏ hơn của kích cỡ tự nhiên của nó hay bất kỳ hạn chế CSS nào. |
Điều gì xảy ra nếu chiều rộng và chiều cao không được định nghĩa?
Trong một số trường hợp, nếu width (chiều rộng) hoặc height (chiều cao) không được quy định, thời gian chạy AMP có thể gán mặc định cho các giá trị này như sau:
amp-pixel: Cả chiều rộng và chiều cao sẽ được đặt mặc định là 0.amp-audio: Chiều rộng và chiều cao mặc định được suy luận từ trình duyệt.
Điều gì xảy ra nếu thuộc tính layout (bố cục) không được quy định?
Nếu thuộc tính layout (bố cục) không được quy định, AMP sẽ cố suy luận hoặc phỏng đoán giá trị phù hợp:
| Quy định | Bố cục suy luận |
|---|---|
height (chiều cao) được quy định và width (chiều rộng) bị thiếu hoặc bằng auto (tự động) | fixed-height |
Các thuộc tính width (chiều rộng) hoặc height (chiều cao) được quy định cùng với thuộc tính sizes (kích cỡ) | responsive |
Cả hai thuộc tính width (chiều rộng) và height (chiều cao) đều được quy định | fixed |
width (chiều rộng) và height (chiều cao) không được quy định | container |
Sử dụng các truy vấn đa phương tiện
Truy vấn đa phương tiện CSS
Sử dụng @media để kiểm soát ngoại hình và hành vi của bố cục trang, cũng như cách bạn làm trên các website khác. Khi cửa sổ trình duyệt thay đổi kích cỡ hoặc hướng, các truy vấn đa phương tiện sẽ được tái đánh giá và các yếu tố được ẩn và hiển thị dựa trên kết quả mới.
Truy vấn đa phương tiện yếu tố
Một tính năng mới cho thiết kế tương thích trong AMP là thuộc tính media (đa phương tiện). Thuộc tính này có thể được sử dụng trên mọi yếu tố AMP; nó hoạt động tương tự như truy vấn đa phương tiện trong stylesheet toàn cục của bạn, nhưng chỉ ảnh hưởng đến yếu tố cụ thể trên một trang duy nhất.
Ví dụ, ở đây chúng ta có 2 ảnh với các truy vấn đa phương tiện loại trừ lẫn nhau.
<amp-img media="(min-width: 650px)" src="wide.jpg" width="527" height="355" layout="responsive"> </amp-img>
Tùy thuộc vào chiều rộng màn hình, một trong hai truy vấn sẽ được truy xuất và render.
<amp-img media="(max-width: 649px)" src="narrow.jpg" width="466" height="193" layout="responsive"> </amp-img>