1.根据屏幕大小动态设置字体rem

var docEl = document.documentElement,
//当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当然窗口的变化,一旦有变化就需要重新设置根字体的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
let maxWidth = 750
let cw = docEl.clientWidth>maxWidth ? maxWidth : docEl.clientWidth
docEl.style.fontSize = 10 * (cw / 320) + 'px';
}; //绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

根据屏幕大小动态设置字体rem的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. Android获取屏幕大小和设置无标题栏

    android获取屏幕大小非常常用,例如写个程序,如果要做成通用性很强的程序,适用屏幕很强,一般布局的时候都是根据屏幕的长宽来定义的,所以我把这个总结一下,方便日后忘记的时候查阅.还有就是有时候写程序 ...

  3. Android开发之动态设置字体的样式和粗细

    字体设置通常有两种形式: 1:在xml中直接设置 android:textStyle="bold" android:typeface="sans" 2:用jav ...

  4. vue/cli 3.0 font-size随屏幕大小变化而变化 rem设置

    在安装cube-ui框架时 安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit ...

  5. Unity UI大小动态设置(Resize Unity UI RectTransform)

    我们在开发过程中发现,要调整Unity UI元素的大小,RectTransform提供了sizeDelta属性可以用来动态修改RectTransform的大小,但同时我们也google到另外一个修改R ...

  6. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. pycharm动态设置字体放大缩小

    放大设置 File —> settings—> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) —> 在弹出的对话 ...

  8. Android动态设置字体颜色

    步骤: 1.在values目录下的strings.xml文件中加入颜色:比方 <color name="ccc">#ccc</color> 2.假设你直接这 ...

  9. Android textView 动态设置代码字号大小,支持单位选项 dp,sp or px

    setTextSize(TypedValue.COMPLEX_UNIT_PX,22); //22像素 setTextSize(TypedValue.COMPLEX_UNIT_SP,22); //22S ...

随机推荐

  1. mysql 链接失败(ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES))

    mysql链接失败(ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)) 修改: # ...

  2. Android项目架构之业务组件化

    前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...

  3. boost库的使用

    我的经验:在强调运行效率的场合:shared_ptr/weak_ptr很好用,尤其是weak_ptr这个能够判断一个对象的生命周期的玩意,可以简化和扩展很多设计.unordered系列的容器也很不错. ...

  4. JAVA中取余(%)规则和介绍

    在java中%的含义为取余. java :a%b 数学公式a%b=a-(a/b)*b

  5. 不定长链表队列C语言实现

    #ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

  6. 新接触PHP课程,给自己定制的目标

    PHP课程初接触,对自己的计划和展望恢复 从今天开始了为期四个半月的关于PHP课程的学习.从零开始接触一门新的技术知识,而且还是在短短四个月内就要掌握牢固,其实确确实实感觉不易.可是世间再没有路,不还 ...

  7. php数据类型及转换

  8. VIM常用设置

    批量替换:  #:%s/source_pattern/target_pattern/g "My Custom Configuration filetype plugin indent on ...

  9. Linux下不同服务器间数据传输--转载

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

  10. css Animation初体验

    目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中 ...