svg自适应写法

svg自适应写法

<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="width:30%; height:3.6rem;"> <svg width="100%" height="100%" viewBox="0,0,40,30" style="border:1px solid #cd0000;"> <rect x="0" y="0" width="40" height="30" fill="#cd0000"/> </svg> </div> <script src="https://my.oschina.net/moban/js/jquery.min.js"></script> <script type="text/javascript"> (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', /\*如果屏幕尺寸发生了变化就会立即更新\*/ recalc = function() { /\* var clientWidth = docEl.clientWidth;\*/ var clientWidth = parseInt($('body').width()); if (!clientWidth) return; docEl.style.fontSize = 20 \* (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; /\*如果窗口改变了大小手机旋转了都会重新修改font-size属性\*/ win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); $(function() { $('.dds').on('click', function() { $(this).attr('fill', 'green'); }) }) </script> </body> </html> </pre>

评论区

加载中...

评论区

相关推荐