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. HTML(二)属性,标题,段落,文本格式化

    HTML属性 HTML属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="value" 常用属 ...

  2. 百度之星初赛A轮 A 度度熊拼三角 贪心

    度度熊拼三角  Accepts: 2536  Submissions: 4433  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 6553 ...

  3. 杭电多校第二场 hdu 6315 Naive Operations 线段树变形

    Naive Operations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 502768/502768 K (Java/Other ...

  4. java 自动生成四则运算式

    本篇文章将要介绍一个“自动生成四则运算式”的java程序,在没有阅读<构建之法>之前,我已经通过一个类的形式实现了要求的功能,但是当阅读完成<构建之法>之后,我意识到自己所写程 ...

  5. JS-DOM ~ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. .Net基础篇_学习笔记_第三天_Convert类型转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. 关于Elasticsearch文档的描述以及如何操作文档的详细总结

    文档 什么是文档 在大多数应用中,多数实体或对象可以被序列化为包含键值对的 JSON 对象. 一个 键 可以是一个字段或字段的名称,一个 值 可以是一个字符串,一个数字,一个布尔值, 另一个对象,一些 ...

  8. 4.1、顺序栈的实现(java实现)

    1.实现源码 public class SeqStack { private final int MaxSize = 8; private int top; //栈顶 private Object s ...

  9. jmeter性能分析

    1.硬件要求:包括客户端和服务端的cpu,mem,network,disk等,这些硬件设备必须满足性能测试的前提下,才能进行性能测试,否则得到的各项指标不一定是正确的 2.场景分析: 测试前的准备工作 ...

  10. Day 19 磁盘管理

    1.磁盘的基本概念 1.什么是磁盘 磁盘(disk)是指利用磁记录技术存储数据的存储器. 磁盘是计算机主要的存储介质,可以存储大量的二进制数据,并且断电后也能保持数据不丢失. *绝大多数人对硬盘都不陌 ...