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. Java项目多数据源配置

    由于种种原因,有的时候可能要连接别人的数据库,或者不同的数据库没法自动转换,重构起来数据量又太大了,我们不得不在一个项目中连接多个数据源.从网上找了各种资料,只有这位大神给出的解决方案一下子就成功了. ...

  2. 《利用python进行数据分析》读书笔记 --第一、二章 准备与例子

    http://www.cnblogs.com/batteryhp/p/4868348.html 第一章 准备工作 今天开始码这本书--<利用python进行数据分析>.R和python都得 ...

  3. laravel框架总结(八) -- ORM模型

    ORM模型简介 1>什么是ORM? ORM,即 Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在操作具体的 ...

  4. URL中的保留和不安全字符

    书写URL时要使用US-ASCII字符集可以显示的字符. http://www.google.com 如果需要在URL中使用不属于此字符集的字符,就要使用特殊的符号对该字符进行编码. 如:最常使用的空 ...

  5. 对一个二维数组进行升序排列a[0][1]为最小

    public static int[][] dyadicArraySort(int a[][]){ int temp=0;int sum =0;int nn=0; for(int i=0;i<a ...

  6. php-sql-parser sql防注入脚本

    <?php /** * SQL Parser from: http://code.google.com/p/php-sql-parser/ * License: New BSD */ class ...

  7. C#知识点总结系列:C# 数据结构

    线性表(Linear List) 线性表是一个线性结构,它是一个含有n≥0个结点的有限序列,对于其中的结点,有且仅有一个开始结点没有前驱但有一个后继结点,有且仅有一个终端结点没有后继但有一个前驱结点, ...

  8. rgb转16进制 简单实现

    function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }

  9. Openfire基础

    网上很多openfire相关资料,这里做下学习汇总 openfire官网:http://www.igniterealtime.org/ 可以下载openfire.spark.smack安装包及源码,安 ...

  10. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...