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="/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>

svg自适应写法的更多相关文章

  1. SVG跟随父级DIV自适应

    后台返回过来的是这样的SVG标签 <svg width="100%" height="100%" version="1.1" xmln ...

  2. d3可视化实战01：理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  3. SVG制作可爱小页面

    很久都没有在博客园上发表一些自己学的新东西了,只是在有空的时候逛一逛博客园而已,看来我不是一个真正的程序员,哈哈! 但是今天非常想和大家分享一个小东西,那是前两天在一个网页上看到了这个东西 我好奇中间 ...

  4. svg标签

    在页面上画图无非有两种方法,一种是canvas,另外一种就是svg了,canvas之前已经介绍过了,现在来介绍一下svg吧. 其实早在svg出现以前几年,微软已经推出了类似的东西,叫做vml,早期是为 ...

  5. 酷炫的SVG 动态图标

                                                      在  loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几 ...

  6. svg描边路径动画

    svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  7. 前端学习之Bootstrap学习

    一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...

  8. 响应式页面-@media介绍

    01 响应式页面-@media介绍,   我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话 ...

  9. 01 响应式页面-@media介绍,

    我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...

随机推荐

  1. python编程基础之十五

    二维列表 l1 = [[1, 2, 3], [4, 5, 6]] print(l1[0][0]) 列表负值 列表复制为两种:深复制,浅复制 浅复制:只复制容器,容器里的元素不产生副本,只是技术引用增加 ...

  2. 基于 WebGL 的 3D 动态柱状图表

    发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...

  3. unittest中diascover批量执行用例

    # case_dir='./'#当前脚本的路径 # discover=unittest.defaultTestLoader.discover(case_dir,pattern='unittest_fr ...

  4. 攻防世界(XCTF)WEB(进阶区)write up(三)

    挑着做一些好玩的ctf题 FlatScience web2 unserialize3upload1wtf.sh-150ics-04web i-got-id-200 FlatScience 扫出来的lo ...

  5. [Luogu3112] [USACO14DEC]后卫马克Guard Mark

    题意翻译 FJ将飞盘抛向身高为H(1 <= H <= 1,000,000,000)的Mark,但是Mark被N(2 <= N <= 20)头牛包围.牛们可以叠成一个牛塔,如果叠 ...

  6. Api版本管理

    关于SpringMVC中如何添加,这一篇说的很详细了. http://www.cnblogs.com/jcli/p/springmvc_restful_version.html 版本管理可以通过路径进 ...

  7. 【Spring Cloud】客户端负载均衡组件——Ribbon（三）

    一.负载均衡 负载均衡技术是提高系统可用性.缓解网络压力和处理能力扩容的重要手段之一. 负载均衡可以分为服务器负载均衡和客户端负载均衡,服务器负载均衡由服务器实现,客户端只需正常访问:客户端负载均衡技 ...

  8. opencv::积分图计算

    利用积分图像,可以计算在某象素的上-右方的或者旋转的矩形区域中进行求和.求均值以及标准方差的计算,并且保证运算的复杂度为O(). #include <opencv2/opencv.hpp> ...

  9. 05 Node.js学习笔记之发送文件数据

    这章学习在NodeJs中如何将Html文件发送到客户端上,以及定义Content-Type内容类型 //1.载入http和fs模块 var http=require("http") ...

  10. scp -本地文件上传服务器，指定端口

    scp 命令可以将本地文件上传服务器,或者将服务器上的文件下载到本地, 1.  上传服务器: scp [本地文件目录]  [服务器用户名]@[服务器名]:/[服务器上文件路径] 比如 scp /Doc ...