(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的更多相关文章

  1. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  2. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  3. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  4. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  5. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  6. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  7. SublimeText插件cssrem : px转换为rem

    步骤: 下载插件: https://github.com/flashlizi/cssrem 安装插件: 打开:Sublime Text 点击: Preferences 选择: Browse Packa ...

  8. Vue项目中自动将px转换为rem

    一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...

  9. vue项目使用webpack loader把px转换为rem

    下载lib-flexible https://github.com/amfe/lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexibl ...

  10. vw+vh+rem响应式布局

    科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...

随机推荐

  1. AD LDAP

    Ref: Windows 域之 LDAP与AD [安全科普]AD域安全协议(三)LDAP AD 域服务简介(一)- 基于 LDAP 的 AD 域服务器搭建及其使用 https://milestone- ...

  2. Redis、Nginx、SQLite、Elasticsearch等开源软件成功的原因及他们对IT技术人员的启示

    引言 这些年在自研产品,对于如何做好产品进行了一些思考.随着开源软件的蓬勃发展,许多开源项目已经成为IT行业的核心组成部分.像Redis.Nginx.SQLite.Elasticsearch这些知名的 ...

  3. 可持久化线段————主席树(洛谷p3834)

    洛谷P3834 可持久化线段树 2 问题描述: 给定n各整数构成的序列,求指定区间[L,R]内的第k小值(求升序排序后从左往右数第k个整数的数值) 输入: 第一行输入两个整数n,m,分别代表序列长度n ...

  4. GZY.Quartz.MUI(基于Quartz的UI可视化操作组件) 2.7.0发布 新增各项优化与BUG修复

    前言 时隔大半年,终于抽出空来可以更新这个组件了 (边缘化了,大概要被裁员了) 2.7.0终于发布了~ 更新内容: 1.添加API类任务的超时时间,可以通过全局配置也可以单个任务设置 2.设置定时任务 ...

  5. 从url地址获取主机名

    function getHost(url) { var host = "null"; if(typeof url == "undefined"|| null = ...

  6. kotlin关键字与操作符

    硬关键字:始终解释为关键字,不能用作标识符 as - 用于类型转换 - 为导入指定一个别名 as? 用于安全类型转换 break 终止循环的执行 class 声明一个类 continue 继续最近层循 ...

  7. day02-json字符串和js对象

    Web1.0时代 早期网站的登录,如果失败,需要刷新页面才能重新登录; 如果不点击提交按钮,就不知道自己密码输错了: 现在大多数的网站,都是局部刷新,在不刷新整个页面的情况下,实现页面更新: 注册的时 ...

  8. KubeSphere 部署 Kafka 集群实战指南

    本文档将详细阐述如何利用 Helm 这一强大的工具,快速而高效地在 K8s 集群上安装并配置一个 Kafka 集群. 实战服务器配置(架构 1:1 复刻小规模生产环境,配置略有不同) 主机名 IP C ...

  9. 使用 KubeSphere 应用商店 5 分钟内快速部署 JuiceFS

    作者:朱唯唯,尹珉 JuiceFS 简介 JuiceFS 是为海量数据设计的分布式文件系统,使用对象存储来做数据持久化,避免重复造轮子,还能大大降低工程复杂度,让用户专注解决元数据和访问协议部分的难题 ...

  10. 云原生爱好者周刊 | 使用 WASM 来写博客是什么感觉?

    开源项目推荐 zzhack zzhack 是一个静态博客框架,是一个纯正的 WASM 应用,它由 Rust & Yew 来作为技术栈进行搭建,UI 设计比较美观,大家也可以直接使用该项目的设计 ...