![]() When I say “breakpoint”, I’m referring to a specific width/height at which I can change from one layout to another. Media queries are our bread and butter, because they allow us to completely change the layout of a page at a particular breakpoint. For this, we can also define the height as “auto” so it maintains its original aspect ratio. This may not suffice if the image is uploaded with its original dimensions hard-coded, as the width would be constricted but the height would not resulting in the image being stretched vertically. Instead of defining the width of an image as 100%, we can define it’s max-width as 100% so that it won’t grow outside of its container but so it also won’t grow beyond its native size. This has the same benefit for images as well, although it can have some unforeseen side effects. Now we can define that width as 100% and it will appear as full width on every device, with the text staying the same size and wrapping as it needs to depending on that specific device. And if the user zooms out to see the full element, now the text has shrunk to half its intended size. If I define the width of a block of text as 640px, it’s not going to be completely visible on a mobile phone with a width of 320px without scrolling and/or zooming. Ignoring pixel density for now, the size of a pixel is not dynamic. Who says your website will only be viewed on phones, tablets, and computer monitors? It can just as easily be viewed on TVs, mobile gaming devices, and nearly anything with a screen and internet connection.įor years and years, we used pixels to define widths, heights, font sizes, and nearly everything else as we built a website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |