makotom/20200122-minmax-depth.html

## 20200122-minmax-depth.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>min/max width</title>

<style>
    @media (min-width: 800px) {
        #min-width {
            display: block;
            background-color: #0af;
        }
    }

    @media (max-width: 800px) {
        #max-width {
            display: block;
            background-color: #f80;
        }
    }

    p.display-adaptively {
        display: none;
    }
</style>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const widthValue = document.querySelector('span#width-value');
        const _indicateWindowWidth = (indicator) => {
            while (indicator.firstChild) {
                indicator.removeChild(indicator.firstChild);
            }

            indicator.appendChild(document.createTextNode(`${window.innerWidth}`));
        };
        const indicateWindowWidth = _indicateWindowWidth.bind(this, widthValue);

        window.addEventListener('resize', indicateWindowWidth);
        indicateWindowWidth();
    });
</script>

<div>
    <p>
        <code>min-width</code> and <code>max-width</code> expects a value that is <em>inclusive</em><sup><a href="https://drafts.csswg.org/mediaqueries-4/#mq-min-max">*</a></sup>.<br>
        Thus, specifying the same value for a pair of <code>min/max-width</code> conditions for <code>@media</code></code>> query would make a situation that both rules will be applied simultaneously.
    </p>

    <p>
        This test case showcases the statement above.<br>
        If the window width is adjusted to 800px, two coloured lines would appear simultaneously, while only one would be visible otherwise.
    </p>
</div>

<div>
    <p>
        Current window width: <span id="width-value"></span> px
    </p>

    <p id="min-width" class="display-adaptively">
        This will be shown if <code>min-width</code> conditions is satisfied.
    </p>

    <p id="max-width" class="display-adaptively">
        This will be shown if <code>max-width</code> conditions is satisfied.
    </p>
</div>
	<!doctype html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>min/max width</title>

	<style>
	@media (min-width: 800px) {
	#min-width {
	display: block;
	background-color: #0af;
	}
	}

	@media (max-width: 800px) {
	#max-width {
	display: block;
	background-color: #f80;
	}
	}

	p.display-adaptively {
	display: none;
	}
	</style>

	<script>
	window.addEventListener('DOMContentLoaded', () => {
	const widthValue = document.querySelector('span#width-value');
	const _indicateWindowWidth = (indicator) => {
	while (indicator.firstChild) {
	indicator.removeChild(indicator.firstChild);
	}

	indicator.appendChild(document.createTextNode(`${window.innerWidth}`));
	};
	const indicateWindowWidth = _indicateWindowWidth.bind(this, widthValue);

	window.addEventListener('resize', indicateWindowWidth);
	indicateWindowWidth();
	});
	</script>

	<div>
	<p>
	<code>min-width</code> and <code>max-width</code> expects a value that is <em>inclusive</em><sup><a href="https://drafts.csswg.org/mediaqueries-4/#mq-min-max">*</a></sup>.<br>
	Thus, specifying the same value for a pair of <code>min/max-width</code> conditions for <code>@media</code></code>> query would make a situation that both rules will be applied simultaneously.
	</p>

	<p>
	This test case showcases the statement above.<br>
	If the window width is adjusted to 800px, two coloured lines would appear simultaneously, while only one would be visible otherwise.
	</p>
	</div>

	<div>
	<p>
	Current window width: <span id="width-value"></span> px
	</p>

	<p id="min-width" class="display-adaptively">
	This will be shown if <code>min-width</code> conditions is satisfied.
	</p>

	<p id="max-width" class="display-adaptively">
	This will be shown if <code>max-width</code> conditions is satisfied.
	</p>
	</div>