Two Css Tricks That'Ll Make Your Site Fully Responsive

Almost every new client these days wants a điện thoại version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the máy tính bảng iPad, netbook, Kindle — và all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

Bạn đang xem: Two css tricks that'll make your site fully responsive


*
Above sầu, the h1 element holds the illustration as a background, and the image is aligned according to lớn the container’s background (the heading).

This is just one example of the kind of thinking that makes responsive sầu Web thiết kế truly effective. But even with smart fixes like this, a layout can become too narrow or short khổng lồ look right. In the hình ảnh example above (although it works), the igiảm giá khuyến mãi situation would be lớn not crop half of the illustration or khổng lồ keep the biệu tượng công ty from being so small that it becomes illegible and “floats” up.

Flexible Images

One major problem that needs khổng lồ be solved with responsive sầu Web design is working with images. There are a number of techniques to lớn resize images proportionately, và many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to lớn use CSS’s max-width for an easy fix.

img max-width: 100%; As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set lớn 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum kích thước they will be used at. You don’t declare the height và width in your code, but instead let the browser rekích thước the images as needed while using CSS to guide their relative sầu size”. It’s a great và simple technique khổng lồ rekích thước images beautifully.

chú ý that max-width is not supported in IE, but a good use of width: 100% would solve sầu the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought khổng lồ be. There is a JavaScript lớn fix this issue, though, found in Ethan Marcotte’s article.

While the above sầu is a great quichồng fix & good start to responsive sầu images, image resolution và download times should be the primary considerations. While resizing an image for sản phẩm điện thoại devices can be very simple, if the original image form size is meant for large devices, it could significantly slow tải về times & take up space unnecessarily.

Filament Group’s Responsive Images

This technique, presented by the Filament Group, takes this issue into lớn consideration & not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the thử nghiệm page here.

*
The data-fullsrc is a custom HTML5 attribute, defined in the files linked to lớn above sầu. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to lớn load the bigger image, và so the smaller image (smallRes.jpg) will load.

The JavaScript tệp tin inserts a base element that allows the page lớn separate responsive images from others và redirects them as necessary. When the page loads, all files are rewritten to their original forms, & only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have sầu had khổng lồ be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth và loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome và Opera, as well as sản phẩm điện thoại devices that use these same browsers (ipad tablet, iPhone, etc.). Older browsers và Firefox degrade nicely and still rekích cỡ as one would expect of a responsive image, except that both resolutions are downloaded together, so the kết thúc benefit of saving space with this technique is void.

Xem thêm: Từ Rtu Là Gì ? Viết Tắt Của Từ Gì? Phần Cứng Thiết Bị Đầu Cuối Rtu, Gateway

Stop iPhone Simulator Image Resizing

One nice thing about the iPhone & iPod Touch is that Web designs automatically rescale to lớn fit the tiny screen. A full-sized thiết kế, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a di động version. Then, the user could easily zoom in và out as necessary.

There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text & other elements.

iPhone Scale(Image: Think Vitamin | Website referenced: 8 Faces

Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s section. Thanks lớn Think Vitamin’s article on image resizing, we have the meta tag below:

Setting the initial-scale lớn 1 overrides the default lớn reform size images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

Custom Layout Structure

For extreme kích thước changes, we may want khổng lồ change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS truyền thông query. This does not have to lớn be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights & so on.

For example, we could have sầu one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths và floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that và switch khổng lồ a new style sheet. This new child style sheet would adopt everything from the default style sheet và then just redefine the layout’s structure.

Here is the style.css (default) content:

/* Default styles that will carry lớn the child style sheet */html,body background... fonts... color...h1,h2,h3p, blockquote, pre, code, ol, ul/* Structural elements */#wrapper width: 80%; margin: 0 auto; background: #fff; padding: 20px;#content width: 54%; float: left; margin-right: 3%;#sidebar-left width: 20%; float: left; margin-right: 3%;#sidebar-right width: 20%; float: left;Here is the di động.css (child) content:

#wrapper width: 90%;#content width: 100%;#sidebar-left width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;#sidebar-right width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;Moving ContentMedia QueriesCSS3 supports all of the same truyền thông types as CSS 2.1, such as screen, print and handheld, but has added dozens of new truyền thông features, including max-width, device-width, orientation & color. New devices made after the release of CSS3 (such as the iPad & Android devices) will definitely tư vấn truyền thông features. So, calling a truyền thông media query using CSS3 features lớn target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.

In Ethan Marcotte’s article, we see an example of a media query in action:

This truyền thông media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), & if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width và more. Look at “The Orientation Media Query” for more information on setting & restricting widths based on these truyền thông query features.

One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to lớn look at the section of Ethan Marcotte’s article entitled “Meet the truyền thông media query” for more examples & a more thorough explanation.

Multiple truyền thông queries can also be dropped right inlớn a single style sheet, which is the most efficient option when used: