@webcyou-org/replacer v0.2.0

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

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