Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Cách định dạng và bố cục trang AMP HTML

5/5 - (5 bình chọn)

Định dạng và bố cục trên trang AMP HTML giống với trang HTML bình thường, trong cả 2 trường hợp chúng ta sử dụng CSS. Tuy nhiên, AMP giới hạn một số thuộc tính CSS vì lý do hiệu suất và khả năng sử dụng, trong khi mở rộng khả năng responsive với các tính năng như placehoders và fallbacks, advanced art direction via srcset và các thuộc tính bố cục để kiểm soát tốt hơn cách hiển thị các phần tử. Trong bài viết hôm nay chúng ta cùng nhau tìm hiểu về cách định dạng và bố cục trang AMP HTML.

Xem thêm: AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu

Cách định dạng và bố cục trang AMP HTML style_and_layout

Chúng ta có thể dễ dàng làm cho phần tử responsive trong AMP. Chỉ cần thêm thuộc tính layout="responsive" vào chúng.

Contents

Cách thêm định dạng cho trang

Viết tất cả CSS bên trong thẻ <style amp-custom> trong phần đầu của tài liệu.

Cách định dạng và bố cục trang AMP HTML style-1

Chú ý: Chắc chắn rằng chỉ có một thẻ <style amp-custom> trong trang web của bạn.

Định dạng các phần tử sử dụng các thuộc tính thường dùng trong CSS.

Cách định dạng và bố cục trang AMP HTML selector_amp

Xem thêm: Hỗ trợ CSS trong AMP HTML

Layout và media queries

AMP hỗ trợ media queries cho việc thiết kế bố cục của các phần tử trên trang. Thuộc tính layout tạo ra thiết kế responsive dễ dàng hơn so với việc chỉ dùng CSS.

Responsive hình ảnh

Tạo ra hình ảnh responsive bằng cách cung cấp thuộc tính widthheight , đặt giá trị của thuộc tính layoutresponsive và chỉ ra hình ảnh cần sử dụng cho từng kích thước màn hình thông qua thuộc tính srcset

Cách định dạng và bố cục trang AMP HTML responsive_img

Phần tử amp-img tự động co dãn hình ảnh phù hợp với chiều rộng của phần tử chứa nó, và chiều cao tự động đặt theo tỷ lệ được xác định bởi chiều rộng và chiều cao.

Cách định dạng và bố cục trang AMP HTML amp_img_responsive

Thuộc tính layout

Thuộc tính layout giúp chúng ta dễ dàng kiểm soát bố cục của các phần tử và cách chúng hiển thị.

Sử dụng media queries

Sử dụng @media để kiểm soát cách bố cục trang như bạn làm trên website thông thường. Khi cửa sổ trình duyệt thay đổi kích thước hoặc định hướng, media queries được thiết lập lại và cách hiển thị các phần tử từ đó cũng thay đổi.

Xem thêm: Sử dụng CSS media query để thiết kế responsive

Phần tử media queries

Một tính năng bổ sung cho thiết kế responsive sẵn có trong AMP là thuộc tính media. Thuộc tính này có thể được sử dụng trên mọi phần tử AMP.

Dưới đây chúng ta có một ví dụ về 2 hình ảnh khác nhau. Dựa vào độ rộng màn hình, một trong số 2 hình ảnh sẽ được hiển thị.

Cách định dạng và bố cục trang AMP HTML image_amp1

Cách định dạng và bố cục trang AMP HTML image_amp2

Responsive hình ảnh với srcset, sizes và heights

srcset

Sử dụng thuộc tính srcset để điều khiển một phần tử dựa trên các biểu thức. Đặc biệt, sử dụng nó cho tất cả các thẻ amp-img để chỉ ra hình ảnh nào được sử dụng dựa trên kích thước màn hình.

Cách định dạng và bố cục trang AMP HTML img_responsive

Trong ví dụ trên, thuộc tính srcset chỉ ra rằng hình ảnh nào sẽ được sử dụng dựa trên độ rộng màn hình. w chỉ ra độ rộng của các hình ảnh được liệt kê trong thuộc tính srcset

sizes

Bạn có thể sử dụng đồng thời thuộc tính sizes cùng với thuộc tính srcset . Thuộc tính sizes mô tả cách tính toán kích thước phần tử dựa trên biểu thức media. Dựa trên kích thước tính toán của phần tử, trình duyệt sẽ lựa chọn hình ảnh tương đối nhiều nhất được cung cấp trong thuộc tính srcset

Cách định dạng và bố cục trang AMP HTML img_size

Ở ví dụ trên, thuộc tính sizes  chỉ ra chiều rộng của phần tử là 50% so với kích thước khung nhìn khi khung nhìn là 650px hoặc rông hơn. Ví dụ, nếu khung nhìn là 800px, độ rộng của phần tử sẽ là 400px. Trình duyệt sẽ lựa chọn hình ảnh phù hợp chỉ ra trong thuộc tính srcset tương đối với 400px, giả sử tỉ lệ pixel của thiết bị là 1 thì sẽ chọn ảnh có độ rộng 320px.

Cách thêm phông chữ trong AMP

Các trang AMP không thể inlcude các tập tin định dạng bên ngoài, ngoại trừ phông chữ tùy chỉnh. Bạn có thể nhúng phông chữ vào trang theo 2 cách:

1. Thông qua thẻ <link>

2. Thông qua @font-face (không hạn chế, hỗ trợ tất cả các phông)

Sử dụng <link>

Các trang web sau đây là nguồn cung cấp phông chữ được sử dụng thông qua thẻ <link>

– Typography.com: https://cloud.typography.com

– Fonts.com: https://fast.fonts.net

– Google Fonts: https://fonts.googleapis.com

– Font Awesome: https://maxcdn.bootstrapcdn.com

Sử dụng @font-face

Cách khác, bạn có thể sử dụng @font-face trong thẻ định dạng của AMP

Cách định dạng và bố cục trang AMP HTML include_font

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Ngày nay không gian mạng đang không ngừng phát triển, các website ngày càng cạnh tranh với nhau để thu...
    27 giây trước
  2. Facebook Instant Articles đã được Facebook cho phép người dùng sử dụng từ lâu, tuy nhiên các tài khoản thử...
    23 giây trước
  3. Google Project Shield là một dịch vụ chống DDoS Miễn Phí của Google, giúp trang web của bạn được bảo...
    22 giây trước
  4. Nghiên cứu từ khóa là một trong những công việc quan trọng nhất trong SEO. Đây là quá trình dùng...
    18 giây trước
  5. Những tác dụng thần thánh của việc đeo phụ kiện, trang sức đá phong thuỷ trong cuộc sống. Từ lâu,...
    17 giây trước
  6. Hiện nay, sự phát triển như vũ bão của hệ thống mạng toàn cầu internet đã làm thay đổi hoàn...
    23 giây trước
  7. Facebook hiện nay là một kênh mạng xã hội lớn nhất nhì hiện nay. Với số lượng đông đảo người...
    25 giây trước
  8. Mỗi một người sở hữu website đều muốn tăng tỷ lệ khách truy cập, giảm tỷ lệ khách rời đi....
    21 giây trước
  9. Bài viết (single post) là một thành phần quan trọng trong WordPress để hiển thị nội dung mà bạn muốn...
    6 giây trước
  10. Nghiệp viết lách là niềm đam mê, sở thích của rất nhiều người. Nhưng chỉ với niềm đa mê không...
    4 giây trước