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. 2D空间中判断一点是否在三角形内

    要注意如果是XY坐标轴的2D空间,要取差乘分量z而不是y. 实现原理是,将三角形ABC三个边(AB,BC,CA)分别与比较点判断差乘,如果这3个差乘结果表示的方向一致,说明就在三角形内. 效果: 代码 ...

  2. What technical details should a programmer of a web application consider before making the site public?

    What things should a programmer implementing the technical details of a web application consider bef ...

  3. dmidecode查看设备硬件信息

    在bash里输入:dmidecode -s system-product-name 或者lshw -class system 在Linux系统环境下(CentOS .4和Ubuntu .04已确认), ...

  4. BLE编程中关键步骤

    获取权限 <uses-permission android:name="android.permission.BLUETOOTH"/> <uses-permiss ...

  5. java文章显示内容部分(将html转成纯文本)

    public static String splitAndFilterString(String input, int length) { if (input == null || input.tri ...

  6. jsonp的使用

    假设我们已经了解什么是同源策略,以及什么是浏览器的同源策略的限制. 现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据. 我们都知道用&l ...

  7. Linux搭建apache +PHP(CentOS系统)

    1.安装MySQL bash # sudo yum install mysql-server  (下载mysql) bash # service mysqld start (开启mysql服务) ba ...

  8. miniui

    //android提供了一个库minui用于简单的UI输出,源码在bootable/recovery/minui中, //gr_init()和gr_font_size()为minui库提供方法,gr_ ...

  9. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  10. 误删除libc.so.6 恢复

    一.我是怎样一步一步毁掉系统的 最近在centos 7上进行开发.由于需要使用高版本linux内核的特性,需要将linux内核升级.按照教程:centos 7升级内核 进行升级的时候发现在安装elre ...