根据屏幕大小动态设置字体rem
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的更多相关文章
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- Android获取屏幕大小和设置无标题栏
android获取屏幕大小非常常用,例如写个程序,如果要做成通用性很强的程序,适用屏幕很强,一般布局的时候都是根据屏幕的长宽来定义的,所以我把这个总结一下,方便日后忘记的时候查阅.还有就是有时候写程序 ...
- Android开发之动态设置字体的样式和粗细
字体设置通常有两种形式: 1:在xml中直接设置 android:textStyle="bold" android:typeface="sans" 2:用jav ...
- vue/cli 3.0 font-size随屏幕大小变化而变化 rem设置
在安装cube-ui框架时 安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit ...
- Unity UI大小动态设置(Resize Unity UI RectTransform)
我们在开发过程中发现,要调整Unity UI元素的大小,RectTransform提供了sizeDelta属性可以用来动态修改RectTransform的大小,但同时我们也google到另外一个修改R ...
- 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- pycharm动态设置字体放大缩小
放大设置 File —> settings—> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) —> 在弹出的对话 ...
- Android动态设置字体颜色
步骤: 1.在values目录下的strings.xml文件中加入颜色:比方 <color name="ccc">#ccc</color> 2.假设你直接这 ...
- Android textView 动态设置代码字号大小,支持单位选项 dp,sp or px
setTextSize(TypedValue.COMPLEX_UNIT_PX,22); //22像素 setTextSize(TypedValue.COMPLEX_UNIT_SP,22); //22S ...
随机推荐
- javascript高级程序设计---第二、三章
在HTML中引用javaScript javascript的几个属性 type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...
- Codeforces Round #363 (Div. 2)A-D
699A 题意:在一根数轴上有n个东西以相同的速率1m/s在运动,给出他们的坐标以及运动方向,问最快发生的碰撞在什么时候 思路:遍历一遍坐标,看那两个相邻的可能相撞,更新ans #include< ...
- tinkphp登录验证码的使用
登录和验证(控制器) <?php namespace Come\Controller; use Think\Controller; class RenController extends Con ...
- Android BinderService 过程
步骤:建立服务器端服务,暴露接口 1.BinderService /** * @Title BinderService.java * @package cn.boxai.binderservice * ...
- MATLAB地图工具箱学习总结(三)地图工具箱的基本知识
MATLAB地图工具箱学习总结(三)地图工具箱的基本知识 今天想要介绍的是一些比较基础的函数.了解了这些函数,地图投影的基本概念才能真正明白.而要想继续研究MATLAB中有关地图投影的函数,尤其是未来 ...
- cygwin安装
我安装的是cygwin2.5.2,相关下载:https://cygwin.com/setup-x86_64.exe 先安装cygwin,x86_64版本,安装时选择库(gcc-core.gcc-c++ ...
- Button的enabled和clickabled的区别
Button的enabled和clickabled的区别 setEnable设置用户是否可以点击此按钮,setClickable设置程序在某个条件下自动点击此按钮
- idea jrebel6 安装,破解
一.Setting中在线安装JRebel插件,install 二.拷贝下载的jrebel.rar解压后 把里面内容覆盖IDEA插件安装目录中此插件目录之下 下载:http://pan.baidu.co ...
- nuget 服务器
https://nuget.cnblogs.com/v3/index.json http://nuget.lzzy.net/api/v2 https://www.nuget.org/api/v2/ h ...
- 如何在自己的窗体(控件)中显示XAF的视图
Form form = new Form(); DevExpress.ExpressApp.View listView = Application.CreateListView(Application ...