(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. 在 SQLAlchemy 中对数据异步处理的时候,获得关联集合的处理方式

    我们在定义SQLAlchemy对象模型的关系的时候,用到了relationship 来标识关系,其中 lazy 的参数有多种不同的加载策略,本篇随笔介绍它们之间的关系,以及在异步处理中的一些代码案例. ...

  2. 使用 nuxi prepare 命令准备 Nuxt 项目

    title: 使用 nuxi prepare 命令准备 Nuxt 项目 date: 2024/9/7 updated: 2024/9/7 author: cmdragon excerpt: 摘要:本文 ...

  3. c程序设计语言 by K&R(一)一些c语言基础知识

    出自<c程序设计语言> by K&R: 一.导言 二.类型.运算符与表达式 三.控制流 1. 字符输入与输出 getchar() 和 putchar(),输入一个字符.输出一个字符 ...

  4. SQL Server – 基本操作 Table 和 Column

    前言 日常都是用 EF Core 来管理 Database, 偶尔也用 Management Studio, 就是很少手写 Command. 虽然网上一拉就有很多, 但是每次写单侧都要到处找还是挺烦的 ...

  5. SQL Server STRING_AGG

    参考: How To Use STRING_AGG – Concat Multiple Row Values In SQL Server 如果你想做 string.join(',', collecti ...

  6. SpringBoot——整合SSM(主要整合MyBatis)

    基于SpringBoot整合SSM SpringBoot整合Spring(不存在) SpringBoot整合SpringMVC(不存在) SpringBoot整合MyBatis(主要) Spring整 ...

  7. Autodesk 3d Max2020 初始化闪退

    事件起因:给同事安装完 Autodesk 3d Max2020 版本之后,软件初始化就闪退,后来在网上查了资料后解决. 解决办法如下:services.msc --> Autodesk 开头的服 ...

  8. 图像形态学操作(cv2库实现)

    #coding:utf-8 import SimpleITK as sitk import numpy as np import cv2 # 膨胀 def dilateion(image): kern ...

  9. 2023年第十二届数据技术嘉年华(DTC)资料分享

    第十二届数据技术嘉年华(DTC 2023)已于4月8日在北京圆满落幕,大会围绕"开源·融合·数智化--引领数据技术发展,释放数据要素价值"这一主题,共设置有1场主论坛,12场专题论 ...

  10. Ewald求和在分子静电势能计算中的应用

    技术背景 分子动力学模拟中,计算周期性边界条件的静电势常被视作计算的瓶颈之一.形式上是比较容易的,例如不考虑周期性边界条件的话,静电势能就是: \[E=\frac{1}{4\pi\epsilon_0} ...