Monaen's WikiResponsive Images 2017-03-17
Note: There MUST be a space on each side of the
-operators. (A space is not required around
/as the problem is an ambiguity around negation.) For example:
calc(100px - 10%)will work.
100vw, corresponding to the 100 percent of the viewport height or viewport width.
- The way to show three images in a row with 10px gap between each two of them.
width: calc((100% - 20px)/3);
- Udacity webcast for setting up Grunt: Front End version and Full Stack version.
- Getting started with Grunt
- Grunt for People Who Think Things Like Grunt are Weird and Hard
- Generate multi-resolution images with Grunt
- grunt-responsive-images plugin for generating multiple images
- grunt-respimg plugin for a responsive image workflow
- Files used in scripting examples:
- convert.sh (includes instructions)
- Gruntfile.js (remove line 7,
engine: 'im',on Windows)
- Imager.js: responsive image loading developed for BBC News
- Image processing tools:
- HTTP Archive: Average bytes to open a web page
- W3C web page from 1996
- Brian Fling: ‘Great mobile products are created, never ported.’
Here are some examples compared to know the properties of responsive images