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í 15++ 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.

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

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...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Mọi người sao chép nội dung của bạn và đăng nội dung đó lên trang web của họ mà không...
    8 giây trước
  2. Thiết kế webstie là một quá trình thu thập các ý tưởng và thực hiện một cách có thẩm mỹ....
    2 giây trước
  3. Sự phát triển không ngừng của Internet dẫn đến các vấn đề vi phạm bản quyền nghiêm trọng và DMCA...
    1 giây trước
  4. DaVinci Resolve là một cái tên nổi tiếng trong ngành chỉnh sửa video với khả năng chỉnh sửa phi tuyến...
    3 giây trước
  5. Backlink là một trong những từ được sử dụng nhiều nhất trong thế giới tối ưu hóa công cụ tìm...
    7 giây trước
  6. Nhu cầu kinh doanh online ngày càng phát triển. Một trong những yếu tố tiên quyết đầu tiên giúp khách...
    8 giây trước
  7. Với thời đại công nghệ 4.0 phát triển bùng nổ như hiện nay, các thông tin được người dùng tiếp...
    1 giây trước
  8. Ngày nay, nhiều bà nôi trợ đang có xu hướng kinh doanh online. Vì sao kinh doanh online lại phát...
    28 giây trước
  9. Tối ưu hóa công cụ tìm kiếm (SEO) là một chiến lược dài hạn, vì vậy nếu bạn phạm một...
    14 giây trước
  10. GoDaddy là một trong những thương hiệu nổi tiếng trong thị trường miền và web-hosting. GoDaddy phổ biến vì những lý do...
    10 giây trước