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: ...
随机推荐
- [Panzura] identify user operations(copy, open, read ... ) in audit log
应该属于sequence classificagtion 问题 https://monkeylearn.com/text-classification/ https://machinelearning ...
- Java 集合工具包
Java 集合工具包 Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等. Java集合工具包位置是java.util.* Java集合主要可以划分为4个部分 ...
- 携手华为云WeLink,合合信息旗下名片全能王推动人脉管理数智化升级
名片是商务场景中信息传递的重要载体.在无纸化办公日益兴盛的当下,数字名片逐渐被广大职场人士接受,成为商务交流的新方式.近期,合合信息旗下名片全能王与华为云WeLink联合研发,升级数字名片" ...
- ASP.NET Core – Minimal API
介绍 Minimal API 是 .NET 6 才开始有的功能. 它是一个简化版本的 Web API. 我还没有认真的去学习它, 感觉它走的是 Node.js Express 的路线. 目前用它来写小 ...
- 我对互联网和网站运作的理解 – Domain, DNS, Hosting 介绍
前言 一直没有写过关于互联网和网站运作的原理相关文章. 这篇就稍微介绍一下它们. 1. 电脑文件 网站是由许多网页组成的, 网页就是电脑里的 file. extension 是 .html 类似于 . ...
- Azure – WAF (Web Application Firewall)
前言 最近有客户想购买 Azure 的 Web Application Firewall (WAF), 来防 SQL Injection, XSS 攻击. 一开始我是觉得没什么必要, 毕竟什么年代了, ...
- .Net 依赖注入深入探索,做一个DI拓展,实现一个简易灵活的 自动依赖注入框架
一.依赖注入相关知识 1.1.依赖注入的原理和优点 依赖注入(DI),是IOC控制反转思想 的实现.由一个DI容器,去统一管理所有的服务生命周期,服务的创建.销毁.获取,都是由DI容器去处理的. 依赖 ...
- [kubernetes]二进制方式部署单机k8s-v1.30.5
前言 之前在单机测试k8s的kind最近故障了,虚拟机运行个几分钟后就宕机了,不知道是根因是什么,而且kind部署k8s不太好做一些个性化配置,干脆用二进制方式重新搭一个单机k8s. 因为是用来开发测 ...
- 左值 <->右值
左值引用指向左值 右值引用指向右值 int a = 5; int &ref_a = a; // 左值引用指向左值,编译通过 int &ref_a = 5; // 左值引用指向了右值,会 ...
- eBPF 概述:第 3 部分:软件开发生态
1. 前言 在本系列的第 1 部分和第 2 部分中,我们对 eBPF 虚拟机进行了简洁的深入研究.阅读上述部分并不是理解第 3 部分的必修课,尽管很好地掌握了低级别的基础知识确实有助于更好地理解高级别 ...