html viewportをremで拟似的に调整するhttp://bl.ocks.org/ANTON072/raw/a8416ea8cdd09742bad4/
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html viewportをremで拟似的に调整するhttp://bl.ocks.org/ANTON072/raw/a8416ea8cdd09742bad4/相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #CCC;
height: auto;
min-height: 100%;
font-size: 1rem;
visibility: hidden;
}
h1 {
margin: 0;
padding: 2rem 1.2rem;
}
.max {
width: 100%;
height: auto;
}
.frame-all {
width: 32rem;
margin: 0 auto;
background: white;
height: 100%;
}
.frame-all > .inner {
padding: 2rem 1.2rem;
}
p {
font-size: 1.4rem;
}
canvas {
background: #EEE;
}
</style>
</head>
<body>
<div class="frame-all" id="all">
<h1>FitView</h1>
<canvas id="canvas" width="640" height="480"></canvas>
<div class="inner">
<p>Lorem ipsum Sit cupidatat deserunt non dolor incididunt Ut dolore cupidatat veniam deserunt laboris magna veniam sit ut enim ut adipisicing Duis officia quis culpa pariatur esse in mollit.</p>
<p><img src="http://passpo.s3.amazonaws.com/fit-view/images/photo.jpg" height="427" width="640" alt="" class="max"></p>
<p>Lorem ipsum Cillum ex dolor aliquip aliqua quis ullamco ad fugiat magna pariatur ea dolore ex deserunt pariatur amet dolore aliquip est cillum eu amet consequat ut labore ad deserunt qui fugiat enim minim veniam culpa enim consectetur.</p>
<p>Lorem ipsum Cillum ex dolor aliquip aliqua quis ullamco ad fugiat magna pariatur ea dolore ex deserunt pariatur amet dolore aliquip est cillum eu amet consequat ut labore ad deserunt qui fugiat enim minim veniam culpa enim consectetur.</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script>
window.onload = function() {
setTimeout(function(){
var ua = navigator.userAgent.toLowerCase();
var baseWidth = 320;
var baseFz = 62.5;
var ratio;
if (/iphone/.test(ua) || /android/.test(ua)) {
ratio = $(window).width() / baseWidth * baseFz;
}
else {
ratio = baseFz * 2;
}
document.getElementsByTagName('html')[0].style.fontSize = ratio + '%';
$('body').css('visibility', 'visible');
var canvas = document.getElementById('canvas');
var stage = new createjs.Stage(canvas);
$('#canvas').css({
width: $('#all').width(),
height: $('#all').width * 0.75
});
var baseShape = new createjs.Shape();
baseShape.graphics
.beginFill('#000000')
.drawRect(0, 0, canvas.width, canvas.height);
stage.addChild(baseShape);
var circle = new createjs.Shape();
circle.graphics
.beginFill('red')
.drawCircle(0, 0, 100);
stage.addChild(circle);
var loader = new createjs.LoadQueue(false);
var bitmap;
loader.addEventListener('fileload', function(e){
var bitmap = new createjs.Bitmap(e.item.src);
bitmap.regX = e.result.width / 2;
bitmap.regY = e.result.height / 2;
bitmap.x = 640 - e.result.width / 2;
bitmap.y = e.result.height / 2;
bitmap.scaleX = bitmap.scaleY = 0.3;
stage.addChild(bitmap);
setTimeout(function(){
createjs.Tween.get(bitmap).to({x: 200, y: 200, scaleX:1, scaleY: 1}, 800, createjs.Ease.getPowIn(2.2));
}, 1000);
});
loader.loadManifest([{src: 'http://passpo.s3.amazonaws.com/fit-view/images/thumb.jpg'}]);
setTimeout(function(){
createjs.Tween.get(circle).to({x: canvas.width / 2, y : canvas.height / 2}, 800, createjs.Ease.getPowIn(2.2));
}, 2000);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function(){
stage.update();
});
}, 0);
};
</script>
</body>
</html>
以上是关于html viewportをremで拟似的に调整するhttp://bl.ocks.org/ANTON072/raw/a8416ea8cdd09742bad4/的主要内容，如果未能解决你的问题，请参考以下文章