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. Java动手动脑第四讲课堂作业

    动手动脑1 完全“手写代码实现”随机数生成 纯随机数发生器

  2. 用 Python 爬取网易严选妹子内衣信息，探究妹纸们的偏好

    网易商品评论爬取 分析网页 评论分析 进入到网易精选官网,搜索“文胸”后,先随便点进一个商品. 在商品页面,打开 Chrome 的控制台,切换至 Network 页,再把商品页Python入门到精通学 ...

  3. Java中Integer与int对比的一些坑

    Integer与int类型的关系 Integer是int的包装类,int的默认值是0,而Integer的默认值是null(我们经常在代码中使用的Integer.valueOf() 和xx.intVal ...

  4. cocos2d-x 3.2，Label，Action，Listener，Menu Item等简单用法

    转载自:http://blog.csdn.net/pleasecallmewhy/article/details/34931021 创建菜单(Menu Item) // 创建菜单 auto menuI ...

  5. 最简单的ArcGIS Engine应用程序（中）

    上一篇中只能添加代码中指定的shp文件(最简单的ArcGIS Engine应用程序(上)) 为了让用户可以浏览磁盘加载指定的shp文件,需做一下调整. 从工具箱往窗体上添加一个OpenFileDial ...

  6. 搭建YUM本地仓库

    本文介绍如何利用CentOS 7 ISO光盘镜像搭建YUM本地仓库. 环境准备: (1)VMware15.5版本虚拟机 (2)CentOS-7-x86_64-DVD-1908光盘镜像文件 1. 搭建Y ...

  7. [TYVJ2340] 送礼物 - 双向搜索

    题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到 ...

  8. Spring Boot2 系列教程(十五)定义系统启动任务的两种方式

    在 Servlet/Jsp 项目中,如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web基础中的三大组件( ...

  9. 利用WinRM实现内网无文件攻击反弹shell

    利用WinRM实现内网无文件攻击反弹shell 原文转自:https://www.freebuf.com/column/212749.html 前言 WinRM是Windows Remote Mana ...

  10. linux下mqtt-client

    CPATH += ../embe_mqtt/MQTTClient/srcPSRTPATH = ../embe_mqtt/MQTTPacket/src LOADPATH += -I$(CPATH)LOA ...