(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. docker network macvlan

    ref: Docker 网络模型之 macvlan 详解,图解,实验完整 网卡也能虚拟化?网卡虚拟化技术 macvlan 详解 docker和macvlan与host互通  

  2. c# 常用反射和表达式树整理

    更新: 2021-06-19 反射 local function https://stackoverflow.com/questions/43348128/reflection-how-do-i-fi ...

  3. Electron加载服务器端JS:高效打造跨平台桌面应用与本地 API 交互

    在现代桌面应用开发中,使用 Electron 加载远程服务器托管的前端资源,再与本地 API 交互,能够带来灵活的部署和强大的本地功能支持.这种方式不仅提升了开发效率,还能充分利用 PC 端的资源和性 ...

  4. Python实现多维傅里叶变换

    技术背景 在前面一篇文章中,我们介绍了一维离散傅里叶变换和快速傅里叶变换的基本原理和简单的代码实现.本文补充一个多维傅里叶变换的场景,以及简单的Python实现. 二维傅里叶变换 首先回顾一下上一篇文 ...

  5. Kubernetes Pod(Pod Hook?Pod 健康检查?Pod 资源配置?)(十八)

    一.Pod Hook 我们知道 Pod 是 Kubernetes 集群中的最小单元,而 Pod 是由容器组成的,所以在讨论 Pod 的生命周期的时候我们可以先来讨论下容器的生命周期.实际上 Kuber ...

  6. ROS基础入门——实操教程

    ROS基础入门--实操教程 前言 本教程实操为主,少说书.可供参考的文档中详细的记录了ROS的实操和理论,只是过于详细繁杂了,看得脑壳疼,于是做了这个笔记. Ruby Rose,放在这里相当合理 前言 ...

  7. push_back和 emplace_back背后的逻辑

    push_back 与 emplace_back 的区别 push_back: 功能:将一个对象(或其副本)添加到 vector 的末尾. 参数:接受一个对象(或其副本)的引用. 过程: 如果传入的是 ...

  8. go 使用websocket

    package chat import ( "encoding/json" "github.com/gorilla/websocket" "githu ...

  9. 使用KFold交叉验证方法划分训练集和验证集

    在进行深度学习时,为了提高精度,或者为了评估我们模型的优劣,以及如何选择一个更好的模型.这样我们就需要用到交叉验证方法. 我们主要实现如何使用KFold划分训练集和验证集 #coding:utf-8f ...

  10. java工具篇-IDEA

    java的开发离不开好的开发工具,这就需要了解集成开发工具idea 背景黑白风格 设置方法File–>settings–>Appearance & Behavior–>App ...