根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放

时间:2022-12-14 09:17:02

~function anonymous(window){

  //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放

  let computedREM = function computedREM(){

    let winW = document.documentElement.clientWidth,

    desW = 640;

    if(winW>640){

      document.documentElement.style.fontSize = '100px';

      return;

    }

    document.documentElement.style.fontSize = winW/desW * 100 +'px';

  };

  computedEEM();

  window.addEventListener('resize',computedREM);

}(window);

根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放的更多相关文章

  1. javascript动态改变当前页面中元素的状态行为

    function Datea() { var timed = document.getElementById('timed'); var t = setInterval(function TDate( ...

  2. 动态计算Label高度

    //1.设置该label的numberOfLines为0 self.titleLabel.numberOfLines = 0;    //2.字体的设置要与之前相同 NSDictionary * at ...

  3. ES6 动态计算属性名

    在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问. <script type="text/javascript"> var ...

  4. 小程序和Vue利用swiper实现icons分页显示--动态计算

    这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...

  5. 第148天:js&plus;rem动态计算font-size的大小,适配各种手机设备

    需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

  6. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

  7. iOS 动态计算文本内容的高度

    关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. //  获取字符串的大小  ios6 - (CGSize)getStringRect_:(NSString* ...

  8. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  9. iOS中动态计算不同颜色、字体的文字高度

    在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...

随机推荐

  1. Codeforces &num;364 DIV2

      ~A题 A. Cards time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. NoSQL初探之人人都爱Redis:(2)Redis API与常用数据类型简介

    一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...

  3. C&plus;&plus;&sol;C&num; 最基本的Marshal和Ptr

    Vidyo32.VidyoClientInEventLogin Login = new Vidyo32.VidyoClientInEventLogin(); Login.portalUri = thi ...

  4. UVA122-Trees on the level&lpar;链二叉树&rpar;

    Trees on the level Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu Sub ...

  5. 风格一致的backItem在项目中怎样设置

    在相应的navigationController中重写- (void)pushViewController:(UIViewController *)viewController animated:(B ...

  6. 201521123034《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  7. 制作U盘Win10 PE

    1.安装Windows ADK 下载地址 http://go.microsoft.com/fwlink/p/?LinkID=232339 2. 已管理员身份启动“部署和映像工具环境” 3.创建WinP ...

  8. Linux命令之finger

    Linux命令之finger youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger 程序"finger"尚未安装. 您可以使用以下命 ...

  9. rabbitmq在ios中实战采坑

    1. rabbitmq在ios中实战采坑 1.1. 问题 ios使用rabbitmq连接,没过多久就断开,并报错.且用android做相同的步骤并不会报错,错误如下 Received connecti ...

  10. go标准库的学习-time

    参考https://studygolang.com/pkgdoc 导入形式: import "time" time包提供了时间的显示和测量用的函数.日历的计算采用的是公历. 1&g ...