1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。
2、输入width：100％；height：100％；min－width：1000px；这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。
3、输入background-size: cover-webkit-background-size: cover-o-background-size: cover使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
4、输入background－position：center0；使图片的位置，居中，靠左对齐。
html5 canvas首屏自适应背景动画循环效果的插入方法：1、demo.html代码如下：
<html lang="en" class="no-js"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5 canvas首屏自适应背景动画循环效果代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css">
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header" style="height: 185px">
<canvas id="demo-canvas" width="1304" height="185"></canvas>
<h1 class="main-title">Connect <span class="thin">Three</span></h1>
</div>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
<div class="sogoutip" style="z-index: 2147483645visibility: hiddendisplay: none"></div><div class="sogoubottom" id="sougou_bottom" style="display: none"></div><div id="ext_stophi" style="z-index: 2147483647"><div class="extnoticebg"></div><div class="extnotice"><h2>关闭提示 <a href="#" title="关闭提示" id="closenotice" class="closenotice">关闭</a></h2><p id="sogouconfirmtxt"></p> <a id="sogouconfirm" href="#" class="extconfirm">确 认</a><a id="sogoucancel" href="#" class="extconfirm">取 消</a></div></div><div id="ext_overlay" class="ext_overlayBG" style="display: nonez-index: 2147483646"></div><iframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src="http://ht.www.sogou.com/websearch/features/yun6.jsp?pid=sogou-brse-d2a452edff079ca6&w=1366&v=7400&st=1465483516429&od=6612&ls=1465482970132&lc=&lk=1463925952631&sd=72&cd=0&kd=0&u=1450532590172818&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html&r=http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex2.html" style="border: nonedisplay: nonez-index: 2147483645background: transparent"></iframe><script src="http://pb.sogou.com/pv.gif?hintbl=-1&uigs_productid=webext&type=ext_sugg&uigs_t=1465483517392<=212&ie=0&v=7400&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html"></script>
</body>
</html>
2、css样式如下：
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:noneheight:0}[hidden]{display:none}html{font-family:sans-serif-ms-text-size-adjust:100%-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2emmargin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-boxbox-sizing:content-boxheight:0}mark{background:#ff0color:#000}code,kbd,pre,samp{font-family:monospace,seriffont-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%line-height:0position:relativevertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0margin:0 2pxpadding:0.35em 0.625em 0.75em}legend{border:0padding:0}button,input,select,textarea{font-family:inheritfont-size:100%margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:buttoncursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-boxpadding:0}input[type="search"]{-webkit-appearance:textfield-moz-box-sizing:content-box-webkit-box-sizing:content-boxbox-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0padding:0}textarea{overflow:autovertical-align:top}table{border-collapse:collapseborder-spacing:0}
图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 <宽度 <= 768，加载120px的图片， 宽度>768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）