![]() Typically, you'll achieve this with a combination of CSS media queries, a container, and other CSS. When you include a video in your web page, you want to ensure that the user can see the contents of the video and the video's controls (i.e., no overflowing). In this section, we'll look at how you can embed responsive videos and images on AMP pages. Probably the most challenging aspect of responsive design is displaying media correctly on the page so that it responds to the screen's characteristics. In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page. Yes, you can easily get images to fit the screen with "width=100%" but there are performance hits. The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience. Why is it tricky to make elements resize to fit the screen when I can easily do this with the width=100% style? ![]() In the following example, we have a flowers image (640 x 427 px) that we want to display on all screen sizes, so we specified the width and height, and set the layout to responsive. Example: Restricting width of responsive images For example, by setting a "max-width" rule on the "body" or "main", you can restrict all images to a specific max width. You can improve how images appear by simply restricting the width of the image's container. By default, elements with layout=responsive will take the full width of the element's container, which is often unrestricted in width (ie., width=100%). A common mistake is to allow an image to take the full width of the screen, which stretches the image beyond its intended size, causing a poor experience for widescreen users. Almost all AMP elements support a responsive layout refer to the element's reference documentation to see which layouts are supported.Įven though you can easily make elements responsive with "layout=responsive", you still must consider how your elements appear on all screen sizes-including desktop and tablet. ![]() When you apply the responsive layout to an element, that element will automatically resize to the width of its container element, and the height will change based on the aspect ratio specified by the element's width and height. However, in AMP, you can easily make an element responsive by just specifying the "layout=responsive" attribute along with the element's width and height attributes. Making each element resize to fit a screen can be tricky. See the Changing the art direction of an image section for an example that uses the media attribute. This is particularly useful when you need to either show or hide an element based on a media query. Additionally, for finer control over an AMP element, you can specify the media attribute on the element. In AMP, you can continue to use those same CSS queries. In responsive design, you can use CSS queries to tailor the styling of your web page for various screen dimensions without having to alter the content of the page. ![]() Learn about responsive design in AMP from this video. In this guide, we'll show you how you can easily implement these responsive fundamentals in AMP: AMP supports all screen and device categories and provides built-in responsive components. Responsive web design is about building fluid web pages that respond to your user's needs-pages that fit their device's screen size and orientation. Style & Layout Create responsive AMP pages Introduction
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |