vue-retina
Version:
a retinajs binding of vue2
174 lines (161 loc) • 5.48 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/x-template" id="template">
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag @1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img :src="img">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag @2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img :src="img" v-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag @3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img :src="img" v-rjs="3">
</div>
<h2>Background Images</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Bg @1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<div class="bg"></div>
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Bg @2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<div class="bg2" v-rjs="2"></div>
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Bg @3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<div class="bg3" v-rjs="3"></div>
</div>
<h2>Rarer Cases</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>External URL w/ Naming Convention</h3>
<p>
This image is pulled in externally. Retina.js should still work
on external files. Thanks to
<a href="http://powinteractive.com">POWINTERACTIVE</a>
for unwittingly allowing us to borrow their logo :)
</p>
<img
src="http://powinteractive.com/wp-content/uploads/2015/03/pow-circle-logo.png"
v-rjs="2"
/>
</div>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>External URL w/o Naming Convention</h3>
<p>
retina.js continues to provide basic support for manually indicating
a direct URL for a "retina" image. Note that this technique does not
allow for multiple images to be associated with multiple pixel densities.
</p>
<img
src="https://www.google.com/logos/2012/doisneau12-hp.jpg"
v-rjs="'http://www.google.com/logos/2012/wilhelm_busch-2012-hp.jpg'"
style="max-width: 100%"
/>
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Inline Background Image</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<div v-rjs="2" style="background: url(google-logo.png) center center no-repeat; background-size: 300px 99px; width: 300px; height: 99px; margin: 0 auto;"></div>
</div>
</div>
</script>
<script src="./build.js"></script>
</body>
</html>