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. Redis 介绍学习

    1.Redis 简介 Redis 是一个支持数据结构更多的键值对数据库.它的值不仅可以是字符串等基本数据 类型,也可以是类对象,更可以是 Set.List.计数器等高级的数据结构. Memcached ...

  2. Java BIO及实现

    发现日常学习过的知识不久就会遗忘,在此只是整理并记录一下学习笔记,做个回忆,并方便以后查阅,若有错误,欢迎指正 网络模型:TCP/IP网络模型是从OSI七层模型中演化来的,osi模型分为物理层,数据链 ...

  3. requests模块(get请求)篇

    - HTTP for Humans,更简洁更友好- 继承了urllib的所有特征- 底层使用的是urllib3- 开源地址: https://github.com/requests/requests- ...

  4. linux 防火墙基本使用

    写在最前面 由于工作后,使用的Linux就是centos7 所以,本文记录是是centos7的防火墙使用. 从 centos7 开始,系统使用 firewall 进行防火墙的默认管理工具. 基本使用 ...

  5. Java内存模型总结

    Java内存模型 内存模型可以理解为在特定的操作协议下,对特定的内存或者高速缓存进行读写访问的过程抽象,不同架构下的物理机拥有不一样的内存模型,Java虚拟机也有自己的内存模型,即Java内存模型(J ...

  6. Python之网络编程Socket

    Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...

  7. [JZOJ5459]【NOIP2017提高A组冲刺11.7】密室

    Description 小X 正困在一个密室里,他希望尽快逃出密室.密室中有N 个房间,初始时,小X 在1 号房间,而出口在N 号房间.密室的每一个房间中可能有着一些钥匙和一些传送门,一个传送门会单向 ...

  8. opencv::点多边形测试

    点多边形测试 测试一个点是否在给定的多边形内部,边缘或者外部 double pointPolygonTest( InputArray contour, // 输入的轮廓 Point2f pt, // ...

  9. IIS6.0使用冒号上传漏洞利用

    利用条件: 1.iis版本为6.0  2.上传文件名不会重命名 利用: 上传一个jpg木马图片 名字为:cs.asp:.jpg 注意是: 默认windows是不允许文件字含:(冒号)的 所以需要抓包后 ...

  10. 从C++到C++/CLI

    本文转载于:https://www.cnblogs.com/feisky/archive/2009/11/22/1607999.html 刘未鹏(pongba) /文 看起来只是在C++后面多写了一个 ...