ufauction.blogg.se

Just add into this list media quieres for new devices if you need. This is a short list of CSS media query for the most popular devices of 2015-2016. I am sure that the image size normally should not be more like it defines CSS media query standart. Since they're vector-based, they resize perfectly at any resolution, and they're compatible with pretty much every browser except IE8 and Android 2.x.

In addition, if you're not dealing with photos, you should look at SVG images. As always, keep your images as few and as small as possible. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need, but if you're dealing with two-color logos, it's not much of a difference. I make these images 1600 x 1000px or sometimes 1920 x 1200px.

If you're creating a full page background image you'll want these images to be a bit taller. Size those full page background images correctly too. This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. If your image is going to be header/hero background image you'll want it to be long and not too tall. The best thing you can do as far as wide compatibility, then, is a single CSS style: img Anything over that is probably considered a tablet. Many Android smartphones top out at 720px wide, although some go up to 800px.

The iPhone 4S/5 has a high-resolution screen that's 640 pixels wide.