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. 基于MQTT协议的云端proxy远程登陆

    这篇文件是建立在一下两篇文章基础上完成的 很多重复的内容不会在这章提到 https://www.cnblogs.com/y-c-y/p/11685405.html telnet协议相关 https:/ ...

  2. Python移动自动化测试面试 ☝☝☝

    Python移动自动化测试面试   ☝☝☝ Python移动自动化测试面试 学习 教程 1.super 是干嘛用的?在 Python2 和 Python3 使用,有什么区别?为什么要使用 super? ...

  3. Get https://172.18.255.243:6443/api/v1/namespaces/kube-system/configmaps/kubelet-config-1.12: dial tcp 172.18.255.243:6443: i/o timeout

    问题描述 使用外网加入集群的时候报如下错误: Get https://172.18.255.243:6443/api/v1/namespaces/kube-system/configmaps/kube ...

  4. 基于vue组件，发布npm包

    亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...

  5. 洛谷P2051 [AHOI2009] 中国象棋(状压dp)

    题目简介 n*m的棋盘,对每行放炮,要求每行每列炮数<=2,求方案数%9999973 N,M<=100 题目分析 算法考虑 考虑到N,M范围较小,每一行状态只与前面的行状态有关,考虑状压D ...

  6. php中代码执行&&命令执行函数

    转自i春秋 1.eval()函数 #传入的参数必须为PHP代码,既需要以分号结尾. #命令執行:cmd=system(whoami); #菜刀连接密码:cmd <?php @eval($_POS ...

  7. 如何巧妙地在基于 TCP Socket 的应用中实现用户注册功能？

    通常,在基于TCP的应用中(比如我开源的GGTalk即时通信系统),当TCP连接建立之后,第一个请求就是登录请求,只有登录成功以后,服务器才会允许客户端进行其它性质的业务请求.但是,注册用户这个功能比 ...

  8. docker实验--redis集群搭建

    背景介绍: 我经常在做一些小项目的时候,采用了Redis来做缓存,但是都是基于单节点的,一旦redis挂了,整个项目就挂了.于是乎,想到了多节点集群的方式来使用,就开始折腾着怎么去搭建这个集群.在网上 ...

  9. Shiro 并发登录控制

    本文转载于:https://www.w3cschool.cn/shiro/epht1ifg.html

  10. 百万年薪python之路 -- 模块三

    logging 日志模块 loggin模块参数 灵活配置日志级别,日志格式,输出位置: import logging logging.basicConfig(level=logging.DEBUG, ...