refresh();
    window.onresize = function(){
      setTimeout(function(){
        refresh();
      },10)
    };
    function refresh() {
      let deviceWidth = document.documentElement.clientWidth;
      if (deviceWidth > 1200) {
        document.documentElement.style.fontSize = 1200 / 12 + "px";
      } else {
        document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
        console.log(deviceWidth / 7.5+ "px");
      }
    }

移动端适配 rem 设置的更多相关文章

  1. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

  2. 移动端适配-rem(新)

    概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

  3. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  4. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

  5. 移动端适配 后篇(rem+vm)

    涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...

  6. css样式重置 移动端适配

    css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...

  7. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  8. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  9. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

随机推荐

  1. C++中的I/O输入输出问题

    C++ I/O navigation: 1.文件输入输出 2.string流 1.输入输出 C++语言不直接处理输入输出,而是通过一些标准库中类型.从设备(文件,控制台,内存)中读取数据,向设备中写入 ...

  2. IdentityServer3学习记录(搭建IdentityServer项目)

    记录下自己尝试搭建identityServer3的过程,便于自己记录遗忘时翻看,也能便于刚接触的新手简单了解下搭建的过程. 更详细的可以参考 https://www.jianshu.com/p/792 ...

  3. 【HDU6035】 Colorful Tree

    题目的意思是:给定一个点带颜色的树,两点之间的距离定义为路径上不同颜色的个数.求所有点对间的距离和. 做法有点分治,还有传说中的虚树DP,树上差分. 点分治法: 考虑每个点的贡献,可以发现一个点的子树 ...

  4. Codeforces 734D. Anton and Chess(模拟)

    Anton likes to play chess. Also, he likes to do programming. That is why he decided to write the pro ...

  5. 2017 计蒜之道 初赛 第五场 UCloud 的安全秘钥(中等)

    每个 UCloud 用户会构造一个由数字序列组成的秘钥,用于对服务器进行各种操作.作为一家安全可信的云计算平台,秘钥的安全性至关重要.因此,UCloud 每年会对用户的秘钥进行安全性评估,具体的评估方 ...

  6. yzoj P1412 & 洛谷P1629 邮递员送信 题解

    有一个邮递员要送东西,邮局在结点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员每次只能带一 ...

  7. Springboot源码分析之Spring循环依赖揭秘

    摘要: 若你是一个有经验的程序员,那你在开发中必然碰到过这种现象:事务不生效.或许刚说到这,有的小伙伴就会大惊失色了.Spring不是解决了循环依赖问题吗,它是怎么又会发生循环依赖的呢?,接下来就让我 ...

  8. DAX 第八篇:表连接

    表连接是指两张表根据关联字段,组合成一个数据集.表连接不仅可以利用数据模型中已有的关系,而且可以利用DAX表达式基于表的任意列定义连接条件.因此,在DAX中,实现表与表之间的连接,有两种方式: 第一种 ...

  9. 降维和PCA

    简介 要理解什么是降维,书上给出了一个很好但是有点抽象的例子. 说,看电视的时候屏幕上有成百上千万的像素点,那么其实每个画面都是一个上千万维度的数据:但是我们在观看的时候大脑自动把电视里面的场景放在我 ...

  10. 【Offer】[53-3] 【数组中数值和下标相等的元素】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 假设一个单调递增的数组里的每个元素都是整数并且是唯一的.请编程实现一个函数,找出数组中任意一个数值等于其下标的元素.例如,在数组{-3, ...