动态设置缩放比例和html字体大小
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
<!--获取像素比：window.devicePixelRatio
1 / 像素 = 缩放的比例-->
var initScale = 1 / window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale='+ initScale +',minimum-scale='+ initScale +',maximum-scale='+ initScale +'">');
var initWidth = window.document.documentElement.clientWidth; document.getElementsByTagName('html')[0].style.fontSize = initWidth / 50 + 'px';
</script>
<style>
body{
margin: 0;
overflow: hidden;
}
.box{
width: 10rem;
height: 10rem;
margin: 0.33333rem;
background: pink;
float: left;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<div class="box">box6</div>
</body>
</html>
动态设置缩放比例和html字体大小的更多相关文章
- IDEA设置Ctrl+滚轮调整字体大小
IDEA设置Ctrl+滚轮调整字体大小(转载) 按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.
- WebStorm设置编辑器中的字体大小
启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Sche ...
- Eclipse设置：背景与字体大小和xml文件中字体大小调整
Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...
- IDEA或Webstorm设置Ctrl+滚轮调整字体大小
按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.
- Eclipse中设置背景颜色与字体大小和xml文件中字体大小调整
Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...
- Jupyter Notebook 设置黑色背景主题、字体大小、代码自动补全
1.背景主题.字体大小设置 安装Jupyter主题: pip install jupyterthemes 然后,更新Jupyter主题: pip install --upgrade jupyterth ...
- Eclipse设置：背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装
Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...
- （备忘）Eclipse设置：背景与字体大小和xml文件中字体大小调整
Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Text ...
- pycharm设置用滑轮改变字体大小
在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...
随机推荐
- mingw32-gcc.exe: error: CreateProcess: No such file or directory
用code::blocks在windows平台下,搭建object c编译环境时,出现这个错误. 解决的方法: 将setting -> compliler -> Toolchain exe ...
- cocos2d-x 3.6版连连看版本号控制
为了以后的开发和管理.源代码开发必须要使用版本号控制.我们当然选择git来做版本号控制了. 假设你在终端输入git,提示不是一个命令的话.那就说明你的机器没有安装git工具.那就安装一个,百度之有非常 ...
- 看opengl写代码（7） 使用混合数组（glInterLeavedArrays）
glInterLeavedArrays 函数 有 三个 參数 : mode ,stride,pointer. mode :指示 开启 哪些 顶点数组,以及 顶点数组 使用的 数据类型. 其余的 顶点 ...
- firewalld 防火墙 nat 网络地址转换
目的:实现以下效果 一. 准备环境 @1 三台虚拟机 @2 client 端 ip 192.168.1.2 server端 两块网卡 , ip 分别是 192.168.1.1 和 ...
- Windows 驱动开发 - 7
在<Windows 驱动开发 - 5>我们所说的读写操作在本篇实现. 在WDF中实现此功能主要为:EvtIoRead和EvtIoWrite. 首先,在EvtDeviceAdd设置以上两个回 ...
- struts2学习笔记（8）-------struts2的ajax支持
struts2支持一种stream类型的Result,这样的类型的Result能够直接向client浏览器响应二进制,文本等. 我们能够再action里面生成文本响应,然后在client页面动态载入该 ...
- 淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成物理查询计划
SQL编译解析三部曲分为:构建语法树,制定逻辑计划,生成物理运行计划. 前两个步骤请參见我的博客<<淘宝数据库OceanBase SQL编译器部分 源代码阅读--解析SQL语法树>& ...
- Redis内存使用达到maxmemory设定值后玩家数据无法写入解决 Redis数据“丢失”问题
Redis数据“丢失”问题 - CSDN博客 https://blog.csdn.net/real_myth/article/details/52582739 Redis内存使用达到maxmemory ...
- Bootstrap Tooltip源码分析
/* ======================================================================== * Bootstrap: tooltip.js ...
- ELK Stack总结
目录 ELK Stack 介绍 Elasticsearch 概念1(基础) CRUD基本用法 概念2(文本解析器) 查询 分析/聚合 概念3(架构原理的补充) Logstash基础 Kibana的数据 ...