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. electron-vue-webpack引入bootstrap多实例问题Multiple instances of Vue detected!

    在node modules里面找到electron-webpack目录, 修改out->main.js白名单内容,增加 whiteListedModules.add("bootstra ...

  2. odoo 恢复数据库前端报错

    Could not get content for…… jQuery is not defined 原因:数据库缓存 解决方法: select id, create_date, store_fname ...

  3. HDU2874 Connections between cities 最近公共祖先

    第一次按常规的方法求,将所有的查询的u,v,和最近公共祖先都保存起来,然后用tarjan+并查集求最近公共祖先.因为询问的次数过多,所以在保存查询的时候总是MLE,后来参考了一下别人的代码,才突然觉悟 ...

  4. bzoj 2001 CITY 城市建设 cdq分治

    题目传送门 题解: 对整个修改的区间进行分治.对于当前修改区间来说,我们对整幅图中将要修改的边权都先改成-inf,跑一遍最小生成树,然后对于一条树边并且他的权值不为-inf,那么这条边一定就是树边了. ...

  5. CF1027C Minimum Value Rectangle 贪心 数学

    Minimum Value Rectangle time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. 【Redis】发布订阅

    一.概述 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 channel1 ...

  7. 全栈开发博客系统(nodejs+vuejs+mongodb)

    本篇文章将会介绍如何使用nodejs+vuejs构建个人博客. 主要分三部分内容: 环境准备 博客后端管理系统(admin) 后端服务(主要提供admin及web端接口) 博客前端展示(web) 环境 ...

  8. Python批量删除mysql中千万级大量数据

    场景描述 线上mysql数据库里面有张表保存有每天的统计结果,每天有1千多万条,这是我们意想不到的,统计结果咋有这么多.运维找过来,磁盘占了200G,最后问了运营,可以只保留最近3天的,前面的数据,只 ...

  9. 错误:java.lang.Exception: No tests found matching Method testPrePage1(egou_manager_web.TestEBrand) from org.junit.internal.requests.ClassRequest@4f3cc73c

    今天测试分页时出现以下错误: java.lang.Exception: No tests found matching Method testPrePage1(egou_manager_web.Tes ...

  10. 彻底解决android拍照后无法显示的问题

    这是对上篇"android 图片拍照,相册选图,剪切并显示"的文章之后的 改进 上一篇文章虽然能解决图片的拍照剪切以及显示,但是发现他有一个缺点, 如果该程序单独运行,貌似没有任何 ...