(So much information)
(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 withsomething
for f in *; do mv $f $(echo $f | sed SED_SCRIPT); done
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.
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.
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),
#!/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 | |
# |
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