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. BZOJ - 2783 树

    数列 提交文件:sequence.pas/c/cpp 输入文件: sequence.in 输出文件: sequence.out 问题描述: 把一个正整数分成一列连续的正整数之和.这个数列必须包含至少两 ...

  2. p0wnedshell的介绍与使用

    0x01 前言 p0wnedShell是一个用c#编写的攻击性PowerShell主机应用程序,它不依赖于PowerShell .exe,而是在PowerShell runspace环境(. net) ...

  3. opencv::Laplance算子

    Laplance算子 理论:在二阶导数的时候,最大变化处的值为零即边缘是零值.通过二阶导数计算,依据此理论我们可以计算图像二阶导数,提取边缘. 拉普拉斯算子(Laplance operator) 处理 ...

  4. i春秋DMZ大型靶场实验(四)Hash基础

    下载工具包  打开目标机 通过目录爆破发现 phpmyadmin    在登录位置尝试注入 返现 可以注入 直接上sqlmap    上 bp 代理抓包 sqlmap.py  -r  bp.txt  ...

  5. Springboot项目的jar包目录结构

    上图为一个由Luyten工具反编译后的一个jar包 说明: SpringBoot提供的bootstrap的类是放到包的最外面,比如上面的org.springframework.boot.loader. ...

  6. 【Leetcode 做题学算法周刊】第一期

    首发于微信公众号<前端成长记>,写于 2019.10.28 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 1. ...

  7. Apollo报错找不到apollo.meta的问题解决方案

    问题描述 Apollo报错,找不到apoll.meta,但是明明配置了apollo-env.properties到apollo-client内了. apollo-env.properties pro. ...

  8. 探究JavaScript闭包

    什么是JavaScript闭包? 刚开始知道这个词,就误以为是自动执行的匿名函数块. 比如说+function(){}(); 然而并不是,那么请看下面的例子: function init() { va ...

  9. unity 序列帧播放

    [SerializeField] private Image m_ScreenImage; //序列帧播放的image [SerializeField] ; // 一秒播放的帧数 [Serialize ...

  10. Xbim.GLTF源码解析（一）：简介

    原创作者:flowell,转载请标明出处:https://www.cnblogs.com/flowell/p/10838972.html 简介 Xbim.GLTF是将IFC文件转换成GLTF文件的一个 ...