<!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字体大小的更多相关文章

  1. IDEA设置Ctrl+滚轮调整字体大小

    IDEA设置Ctrl+滚轮调整字体大小(转载)   按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.

  2. WebStorm设置编辑器中的字体大小

    启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Sche ...

  3. Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...

  4. IDEA或Webstorm设置Ctrl+滚轮调整字体大小

    按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.

  5. Eclipse中设置背景颜色与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  6. Jupyter Notebook 设置黑色背景主题、字体大小、代码自动补全

    1.背景主题.字体大小设置 安装Jupyter主题: pip install jupyterthemes 然后,更新Jupyter主题: pip install --upgrade jupyterth ...

  7. Eclipse设置：背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  8. （备忘）Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text ...

  9. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

随机推荐

  1. vbs io file

    <% ''/*******************************二进制文件操作类************************************ ''/*作者:死在水中的鱼(死 ...

  2. hbase shell经常使用命令

    hbase经常使用命令 /usr/local/cloud/hbase/bin/hbase shell 用shell来连接hbase exit 退出hbase shell version 查看hbase ...

  3. Lint工具去除Android工程里不再需要的资源

    摘要: 在项目开发过程中常常会不断改UI设计,于是在定稿要发布的前夕,发现有好多不再需要的资源文件存在,发布的包会把这些无用的资源都包含在里面,造成APK的下载包过大.可以通过Android SDK自 ...

  4. __init__、__str__、__del__方法

    1.def__init__()方法: class Cat: """定义了一个Cat类""" #初始化对象 def __init__(self ...

  5. JavaScript你所不知道的困惑（1）

    困惑一: 先看一个样例: function test(){ message = "hi"; } test(); alert(message); 会输出字符串"hi&quo ...

  6. npm安装以及命令行

    安装visual studio的时候,安装Node.js会同时安装npm 查看版本 PS C:\Users\clu\Desktop> npm --version5.6.0 PS C:\Users ...

  7. YTU 2642: 填空题：类模板---求数组的最大值

    2642: 填空题:类模板---求数组的最大值 时间限制: 1 Sec  内存限制: 128 MB 提交: 646  解决: 446 题目描述   类模板---求数组的最大值    找出一个数组中的元 ...

  8. Silverlight之控件应用总结（二）（4）

    [置顶] Silverlight之控件应用总结(二)(4) 分类: 技术2012-04-03 22:12 846人阅读 评论(0) 收藏 举报 silverlightradiobuttonhyperl ...

  9. P2610 [ZJOI2012]旅游 树的直径

    这个题就是建图不太好建,但是我们一想,三角形貌似只能两两挨着,最后会变成一个二叉树,所以问题就变成求树的直径.建图用pair套map超级简单. 题干: 到了难得的暑假,为了庆祝小白在数学考试中取得的优 ...

  10. Joseph问题 （线段树）

    Joseph问题似乎是入门题,就是那个报数出圈的问题,不过它暴力模拟的复杂度是O(nm)的,如果题目的数据范围达到了30000,那就超时了.怎么用线段树维护呢? 我们可以这么考虑,每次我们其实要查询在 ...