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. 使用element-ui中table expand展开行控制显示隐藏

    问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...

  2. 牛客-小a的旅行计划 + 数学推导

    小a的旅行计划 题意: 小a终于放假了,它想在假期中去一些地方游玩,现在有N个景点,编号为,同时小b也想出去游玩.由于一些特殊♂原因,他们的旅行计划必须满足一些条件 首先,他们可以从这N个景点中任意选 ...

  3. POJ - 2516 Minimum Cost 每次要跑K次费用流

    传送门:poj.org/problem?id=2516 题意: 有m个仓库,n个买家,k个商品,每个仓库运送不同商品到不同买家的路费是不同的.问为了满足不同买家的订单的最小的花费. 思路: 设立一个源 ...

  4. 调用arcpy包批量进行矢量掩膜提取

    使用一个polygon矢量提取某个文件夹中所有的tif格式栅格数据 (要确保先安装好arcpy包) import arcpy arcpy.CheckOutExtension("spatial ...

  5. 第一次作业:学习C++指针

    1 内存空间的访问方式 计算机的内存存储器被划分为一个个存储单元.储存单元按一定的规则编号,这个编号就是存储单元的地址.地址编码的基本单位是字节,每个字节由8个二进制位组成,也就是说每个字节是一个基本 ...

  6. MySQL基础/数据库和表的设计

    MySQL基础 一:安装MySQL(按步骤操作,如果下载后使用不了,试着用360安全卫士卸载MySQL,清除残留的,方便在下载造成不必要的麻烦:如果这样也不行,那就需要重做系统在进行下载) 二:创建数 ...

  7. vmware vsphere client 创建虚拟机

    浏览器访问https://192.168.120.29 用户名:administrator@zhcs.com 密码:  Deyi123456! 说明:此案例为创建linux的Centos7的操作系统的 ...

  8. 【第十三篇】mvc下载文件,包括配置xml保护服务端文件不被外链直接访问

    这里先说下载文件 <a style="color:black; margin-right:3px;" onclick="dowAtt(' + index + ')& ...

  9. Unity3D_02_基类MonoBehaviour/自带函数以及脚本执行的生命周期

    导引: 其中Time,Input,Physics都是Unity中的全局变量.GameObject是游戏中的基本物件.GameObject是由Component组合而成的,GameObject本身必须有 ...

  10. Python连载38-协程、可迭代、迭代器、生产者消费者模型

    一.生产者消费者模型 import multiprocessing from time import ctime def consumer(input_q): print("Into con ...