Changing image paths with Media Queries.

Usage

<script src="./replacer.umd.js"></script>
<script>
    replacer.init();
</script>

<img data-replace='{"type":"middle","suffix":"_tab"}' src="/path/to/cat.png"  />

Multiple changes

<img data-replace='[{"type":"middle","suffix":"_tab"}, {"type":"small","suffix":"_sp"}]' src="/path/to/cat.png"  />

Matching Types

Scale Type

• large
• middle
• small

<img data-replace='{"type":"middle","suffix":"_tab"}' src="/path/to/cat.png"  />

Device Type

• pc
• tab
• sp

<img data-replace='{"dtype":"tab","suffix":"_tab"}' src="/path/to/cat.png"  />

Media Queries

<img data-replace='{"query":"(max-width: 1200px) and (min-width: 769px)","suffix":"_tab"}' src="/path/to/cat.png"  />

Default BreakPoint

{
    type: 'large',
    deviceType: 'pc',
    query: '(min-width: 1201px)'
},
{
    type: 'middle',
    deviceType: 'tab',
    query: '(max-width: 1200px) and (min-width: 769px)'
},
{
    type: 'small',
    deviceType: 'sp',
    query: '(max-width: 768px)'
}

Public Function

Function Name	Argument	Argument Type	return	Details
init		null	void	initialization
addEvent		null	void	Add change event for MediaQueryList
resetEvent		null	void	Remove change event for MediaQueryList
getState		null	State	Get current state
getType		string	string	Get current type
isMatch	type, deviceType, query	string	boolean	Verify MediaQueryList matches.
isType	'small', 'middle', 'large'	string	boolean	Verify MediaQueryList matches.
isDeviceType	'sp', 'tab', 'pc'	string	boolean	Verify MediaQueryList matches.
isQuery	media query	string	boolean	Verify MediaQueryList matches.

Optional

Using Custom BreakPoint

<script>
    replacer.init([
        {
            type: 'large',
            deviceType: 'pc',
            query: '(min-width: 1201px)'
        },
        {
            type: 'middle',
            deviceType: 'tab',
            query: '(max-width: 1200px) and (min-width: 769px)'
        },
        {
            type: 'small',
            deviceType: 'sp',
            query: '(max-width: 768px)'
        }]
    );
</script>

Message

This is a library that replaces images based on Media Query breakpoints, but I don't think this kind of image replacement is good for responsive design. Please use this library when you have no choice but to use it.

Creators

Daisuke Takayama

• @webcyou
• @panicdragon
• https://github.com/webcyou
• https://github.com/panicdragon
• http://www.webcyou.com/

Copyright and license

MIT