使用CSS3的scale实现网页整体缩放
发布时间：2024-10-23 16:27:21
标签：scale,缩放
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px;
text-align: center;
font-size: 4em;
color: #333;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth;
$(document.body).css("-webkit-transform","scale(" + r + ")");
});
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth;
$(document.body).css("-webkit-transform","scale(" + r + ")");
});
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>
0
投稿猜你喜欢
本文实例讲述了MySQL数据库优化之索引实现原理与用法。分享给大家供大家参考，具体如下：索引什么是索引索引用来快速地寻找那些具有特定值的记录- SQL2000的SA密码不能更改的解决方法，在更改sa的密码出现下面的错误：Error 21776: [SQL-DMO] The name
- 看代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
- 本文实例为大家分享了JavaScript实现简易轮播图的具体代码，供大家参考，具体内容如下完整代码：<!DOCTYPE html>
- 废话不多说了，关键代码如下所示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
- 本文实例讲述了Python实现账号密码输错三次即锁定功能。分享给大家供大家参考，具体如下：初学Python—1#实现账号输错三次即锁定use
- Spring @Enable 模块概览框架实现@Enable注解模块激活模块Spring Framework@EnableWebMvcWeb
- python ThreadPoolExecutor线程池的工作线程中出现异常时，主线程不会捕获异常。解决方法1：直接在需要执行的任务方法中添
- 除法啰嗦的，不仅是python。整数除以整数看官请在启动idle之后，练习下面的运算：>>> 2/50>>&g
- 一.Orcal临时表分类1.会话级临时表1).保存一个会话Session的数据。2).当会话退出时，临时表数据自动清空。表结构与元数据还存储
- 适配器模式Adapter Pattern是什么适配器模式是一种结构型模式，它可以将一个类的接口转换成客户端所期望的接口，从而使原本不兼容的类
- optimizer.param_groups： 是长度为2的list，其中的元素是2个字典；optimizer.param_groups[0
- 本文实例为大家分享了检测几何图形轮廓和检测花朵图形轮廓，供大家参考，具体内容如下OpenCV绘制图像轮廓绘制轮廓的一般步骤:1、读取图像im
- 问题：在Jupyter Notebook中使用args传递参数时出现错误：原始代码：args = parser.parse_args()us
- 在数据存储过多时，我们会选择清除，不过有时候也需要找回一些我们之前删掉的数据。有的小伙伴可能会使用不同的方法分别完成，那么今天小编带来的_d
- Python encode()方法encode() 方法为字符串类型（str）提供的方法，用于将 str 类型转换成 bytes 类型，这个
- 前言Jenkins， DevOps 技术栈的核心之一，CI/CD 离不开编写 Pipeline 脚本，上手 Jenkins ，简单查一下文档
- python的列表list可以用for循环进行遍历，实际开发中发现一个问题，就是遍历的时候删除会出错，例如l = [1,2,3,4]for
- 理科学生应该都了解过共轭吧，经常在数学或者物理还有化学中出现，在坐标轴上去描述共轭函数还是比较清晰的，py语言里也经常会出现关于共轭函数的使
- 在深度学习中,模型的输入size通常是正方形尺寸的,比如300 x 300这样．直接resize的话，会把图像拉的变形．通常我们希望resi
