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 报错TypeError: 'range' object does not support item assignment，解决方法

    贴问题 nums = range(5)#range is a built-in function that creates a list of integers print(nums)#prints ...

  2. 前端知识点总结——jQuery（上）

    1.什么是jQuery jQuery: 第三方的极简化的DOM操作的函数库第三方: 下载极简化: 是DOM操作的终极简化: 1. DOM: 增删改查2. 事件绑定:3. 动画效果:4. Ajax DO ...

  3. 为程序员节日献礼--2019中国.NET开发者峰会主题内容发布

    2019年10月24日,组委会正式发布了China .NET Conf 2019中国 .NET 开发者峰会的主题内容. 2014年微软组织并成立.NET基金会,微软在成为主要的开源参与者的道路上又前进 ...

  4. springboot使用idea打jar包

    1.如果有本地jar包依赖,放到/WEB-INF/lib下,用system类型配到pom中 <dependency> <groupId>org.wechat</group ...

  5. selenium-模块概述（1）

    Selenium是一个用于Web应用程序自动化测试工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 1.目录结构如下: D:\soft\python36\Lib\site-pa ...

  6. Redis 文章一 之持久化机制的介绍

    我们已经知道对于一个企业级的redis架构来说,持久化是不可减少的 企业级redis集群架构:海量数据.高并发.高可用 持久化主要是做灾难恢复,数据恢复,也可以归类到高可用的一个环节里面去,比如你re ...

  7. 百万年薪python之路 -- RBAC角色权限设计

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...

  8. Maven Eclipse 笔记

    1. 下载apache-maven-3.1.1-bin.zip SITE:http://maven.apache.org/download.cgi 2. 配置 M2_REPO= C:\Users\&l ...

  9. JVM(5) 类加载机制

    虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化.最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 一.类加载的时机 类从被加载到虚拟机内存中开 ...

  10. （记录）Ubuntu系统中运行需要导入jar包的Java程序

    在学习Redis的过程中,在学到Redis客户端Jedis的时候,考虑到能不能在ubuntu下用Vim编写Java程序并且能够运行呢? 于是,首先在网上调研了一番用Vim写Java程序的可实现性. 相 ...