px转换为rem,响应式js
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
在页面的头部需要添加下面代码
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
px转换为rem,响应式js的更多相关文章
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- 响应式js幻灯片代码一枚
网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...
- px单位html5响应式方案
移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...
- vue px转换为rem
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- SublimeText插件cssrem : px转换为rem
步骤: 下载插件: https://github.com/flashlizi/cssrem 安装插件: 打开:Sublime Text 点击: Preferences 选择: Browse Packa ...
- Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
- vue项目使用webpack loader把px转换为rem
下载lib-flexible https://github.com/amfe/lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexibl ...
- vw+vh+rem响应式布局
科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...
随机推荐
- attention, transformers
这啥呀,慢慢啃 Attention 最初来源于 NLP 机器翻译的 Sequence to Sequence 模型,早先的encoder-decoder结构随着句子长度增加翻译性能会下降,因为模型记不 ...
- LeetCode 验证二叉搜索树的两种不同题型
一.leetcode 98. 验证二叉搜索树 通过辅助函数增加参数进行判断. 虽然节点值在INT范围内,但要求其中序遍历序列严格单调递增,因此等于也不行,而且需要用LONG_MIN\LONG_MAX初 ...
- css+div实现各种常见边框
css+div实现各种常见边框 一.效果图如下 二.实现代码 div { width: 120px; height: 100px; margin: 10px; float: left; text-al ...
- Time Zone, Leap Year, Date Format, Epoch Time 时区, 闰年, 日期格式
前言 以前有写过一篇了, 但很乱, 这篇就作为它的整理版吧. Leap Year 闰年 闰年是指那些有 366 天, 二月份有 29号 的年份. 比如 2020年 有 2月29日, 所以 2020 就 ...
- RxJS 系列 – Join Creation Operators
前言 我们一样从简单和常用的入手. 第一篇介绍了 Creation Operators 上一篇介绍了 Filter Operators 这一篇来到 Join Creation Operators. 参 ...
- Go runtime 调度器精讲(九):系统调用引起的抢占
原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 第八讲介绍了当 goroutine 运行时间过长会被抢占的情况.这一讲继续看 goroutine 执行系统调用时间过长的抢占. 1. 系统调用时 ...
- 使用 Flutter 3.19 更高效地开发
我们已隆重推出全新的 Flutter 版本--Flutter 3.19.此版本引入了专为 Gemini 设计的新 Dart SDK.一个能让开发者对 Widget 动画实现精细化控制的全新 Widge ...
- map的线程安全,boost库读写锁的实现
*************** map的线程安全 ******************** * * 参考1 * map要实现线程安全必须要加锁,如果使用mutex会产生大量的线程等待,可以 ...
- Linux工具:Winscp显示隐藏的文件
事件起因: 需要用Winscp上传文件到服务器,然后发现文件被隐藏了 解决办法: Winscp软件的快捷键 : Ctrl + Alt + HWindscp软件的设置方法: 菜单栏 选项 -> 面 ...
- Vue 文件流预览 PDF
Vue js // pdf 预览 export function download(id) { return request({ url: '/bbs/regtech/law/download?id= ...