BrowserStack's Screenshots service lists Android devices by manufacturer, which isn't very helpful. They are ordered here by version.
BrowserStack has additional devices via their Live testing service, which does a better job of displaying the devices by OS version and type. It also lists device resolution. Listing the DPI would be a great addition.
An asterix (*) denotes a tablet.
Android 2.2 Froyo
| #!/usr/bin/env bash | |
| # | |
| # backgroundimages.sh | |
| # | |
| # Reads directory for image files with @1x substring and | |
| # Creates retina-ready background-image LESS classes using Preboot's .retina-image mixin | |
| # | |
| # Requires ImageMagick | |
| # |
Sometimes there is confusion regarding what a media query actually is. Let's review some CSS terminology with an example.
/* Isn't this a media query? Nope. */
@media
only screen and (max-width: 320px) and (min-device-pixel-ratio: 2),
There is quite a bit going on in both the HTML and CSS specifications regarding responsive and/or adaptive images. It can get a little overwhelming.
Micro Media Queries (MMQs) provide a way to specify CSS media queries in a short format. They use descriptors specified in the srcset attribute with a grammar inspired by @media rules.
The idea of MMQs came about when attempting to consolidate the various methods for producing responsive images: @media, <img srcset>, image-set, and <picture>. A goal is to have 1-1 correspondence so that it easy to convert a query between any of these formats.
Since MMQs tend to be very short, they may be particulary helpful as folder names, within a filename, or as a snippet.
(I keep forgetting how to do this!)
* returns all files in a directory. It can also be used as a general wildcard:
*.jpg will return only JPG filenamessomething* will return only filenames that start with somethingfor f in *; do mv $f $(echo $f | sed SED_SCRIPT); done