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: ...
随机推荐
- 如何在 Web 前端做 3D 音效处理
一.背景 在社交元宇宙.大逃杀等类型的游戏场景下,用户在通过简单语音交流外,结合场景也需要一些立体声效果来让用户感知游戏角色周围其他用户的存在及其对应的距离和方位,提高语音互动的趣味性. 为了满足 ...
- tailwindcss 3.3.3(完成入门,需要补充每个单独样式)
归纳 修饰符堆叠 <button class="dark:md:hover:bg-fuchsia-600"> 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加h ...
- 2024.09.18初赛模拟MX-S/P6029记录
MX-S 太简单了,没啥难度.\yiw $ 1, 3, 5, 7, 9 $ 的二叉搜索树棵数是卡特兰数. P6029 题意 给定一张有 $ n $ 个点,$ m $ 条边的图.可以任意交换途中两条边的 ...
- excel江湖异闻录--自序
本书原名<excel从高手到小白>,取这个名字是因为,当我只会几个有关excel的快捷键和简单函数时我放眼我所在的"井口",当真有种天下谁与争锋的感觉,的确就我周围的伙 ...
- SMMU中stage1 和stage2 的意思
ARM SMMU(System Memory Management Unit)是一种用于ARM架构的内存管理单元,它支持两阶段的地址转换机制,即Stage 1和Stage 2.这种机制允许操作系统和虚 ...
- 1.1 HELLO 窗口
跟着教程,开始第一步创建窗口吧!这一节不涉及太多知识. 本节会出现一些名词,我们现在只需要知道它们大概是干什么的就行. ● GLFW:一个专门针对OpenGL的C语言库,通过它提供的接口,我们就可以渲 ...
- Java日期时间API系列33-----Jdk8中java.time包中的新的日期时间API类应用,格式化常用模板大全,新增Excel常用格式。
从Java日期时间API系列10-----Jdk8中java.time包中的新的日期时间API类的DateTimeFormatter中可以知道常用字符有超过20几种,各种组合结果非常多.但常用的组合就 ...
- 数据库周刊29│2020数据库研究报告;Oracle取消今年技术大会;腾讯云DBbridge发布支持一键迁库;饿了么迁至阿里云;PG数组查询;Oracle被比特币勒索;DM8 安全管理…
摘要:墨天轮数据库周刊第29期发布啦,每周1次推送本周数据库相关热门资讯.精选文章.干货文档. 热门资讯 1.快讯:2020年Oracle OOW大会因疫情取消 系近20年首度[摘要]Oracle ...
- replace 和 replaceAll
replace 匹配中的第一次:replaceAll 替换所有匹配的内容: let str = 'aj123dshf12aaaaaaaaaaa3uausdjd123suas123fus12' let ...
- 63.CDN优化
虽然CDN引入组件库可以优化项目,减轻服务器负载,但是在真实的项目开发中不推荐使用CDN : 因为: 1. 使用第三方服务器不稳定 2. 需要后端配置 3. 要知道组件库的全局变量名