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. javascript高级程序设计---第二、三章

    在HTML中引用javaScript javascript的几个属性  type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...

  2. Codeforces Round #363 (Div. 2)A-D

    699A 题意:在一根数轴上有n个东西以相同的速率1m/s在运动,给出他们的坐标以及运动方向,问最快发生的碰撞在什么时候 思路:遍历一遍坐标,看那两个相邻的可能相撞,更新ans #include< ...

  3. tinkphp登录验证码的使用

    登录和验证(控制器) <?php namespace Come\Controller; use Think\Controller; class RenController extends Con ...

  4. Android BinderService 过程

    步骤:建立服务器端服务,暴露接口 1.BinderService /** * @Title BinderService.java * @package cn.boxai.binderservice * ...

  5. MATLAB地图工具箱学习总结(三)地图工具箱的基本知识

    MATLAB地图工具箱学习总结(三)地图工具箱的基本知识 今天想要介绍的是一些比较基础的函数.了解了这些函数,地图投影的基本概念才能真正明白.而要想继续研究MATLAB中有关地图投影的函数,尤其是未来 ...

  6. cygwin安装

    我安装的是cygwin2.5.2,相关下载:https://cygwin.com/setup-x86_64.exe 先安装cygwin,x86_64版本,安装时选择库(gcc-core.gcc-c++ ...

  7. Button的enabled和clickabled的区别

    Button的enabled和clickabled的区别 setEnable设置用户是否可以点击此按钮,setClickable设置程序在某个条件下自动点击此按钮  

  8. idea jrebel6 安装,破解

    一.Setting中在线安装JRebel插件,install 二.拷贝下载的jrebel.rar解压后 把里面内容覆盖IDEA插件安装目录中此插件目录之下 下载:http://pan.baidu.co ...

  9. nuget 服务器

    https://nuget.cnblogs.com/v3/index.json http://nuget.lzzy.net/api/v2 https://www.nuget.org/api/v2/ h ...

  10. 如何在自己的窗体(控件)中显示XAF的视图

    Form form = new Form(); DevExpress.ExpressApp.View listView = Application.CreateListView(Application ...