<!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. 2011 ACM-ICPC 成都赛区A题 Alice and Bob （博弈动规）

    题目大意: 有K堆石子,每堆有Ki个.两人的操作能够是:             1 从某一堆拿走一个 假设该堆在此之后没有石子了.就消失             2 合并两个堆        求是否 ...

  2. linux netlink套接字实现相似ss命令 ，统计套接字以及TCP信息

    參考了 ss的源码 以及 netlink相关资料:http://blog.csdn.net/scdxmoe/article/details/27711205 实现结果为: gcc netlink_di ...

  3. Angularjs1.x 项目结构

    大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的,但这里更偏向于以应用场景来进行项目架构,因此这里的文件夹结构可能与您之前遇到的结构不同 ...

  4. 利用runtime检測这个对象是否存在某属性?

    假定有实例对象-instance,我们怎样知道该实例对象是否存在属性-propertyName? 利用runtime,我们能够获取到它的属性列表 1)属性列表 unsigned int outCoun ...

  5. Android框架之高速开发框架xUtil

    做Android开发我们通常是从原生态的開始,就是调用默认那些Android代码来开发我们的应用,可是到了一定程度,我们就想着怎么来高速开发我们的应用.这个时候我们就要着手来研究框架了. 以下介绍一个 ...

  6. 每个sql结果返回值的字节大小的峰值统计

    #5KB/per结合数据库配置mylimit = 50

  7. tf.float32 implicity

    简介  |  TensorFlow https://tensorflow.google.cn/programmers_guide/low_level_intro 我们来构建一个简单的计算图.最基本的指 ...

  8. H264--5--H264解码[8]

    原文:http://blog.csdn.net/yangzhongxuan/article/details/8003547 解码器在解码时,首先逐个字节读取NAL的数据,统计NAL的长度,然后再开始解 ...

  9. POJ2115 C-Loop

    传送门 这道题是求解不定方程的一道好练习题. 题目描述的很诡异……还说什么k进制,其实就是要求一个数A,每次加C,问到B要加多少次,所有的数对2k取模. 也就是说我们能列出如下方程:A+xC ≡ B ...

  10. bzoj2594 [Wc2006]水管局长数据加强版——LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2594 时间倒序一下,就是 魔法森林 那道题: 有个不解的地方,是 access 里面关于 p ...