1 var docEl = document.documentElement,
2 //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
3 //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
4 //总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
5 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
6 recalc = function() {
7 //设置根字体大小1:50适用于375的设计稿,需要变更,就更改基础字体的数值
8 docEl.style.fontSize = docEl.clientWidth / 10 + 'px';
9 };
10
11 //绑定浏览器缩放与加载时间
12 window.addEventListener(resizeEvt, recalc, false);
13 document.addEventListener('DOMContentLoaded', recalc, false);

rem布局,使用手机端,pc大屏——亲测好用的更多相关文章

  1. REM布局计算,移动端,pc端有兼容性)

    rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...

  2. 手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  3. (转)手机端html5触屏事件(touch事件)

    本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...

  4. 自适应reset.js布局 用于手机端页面编写

    以下是reset.js具体内容,是从淘宝网站拔下来的.把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以4 ...

  5. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  6. 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

    先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...

  7. vue手机端横屏竖屏切换

    1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} }   2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...

  8. 转:手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  9. 手机端Swiper 触屏滑动

    在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...

  10. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. STL常用函数

    STL简介 \(STL\)是\(Standard\) \(Template\) \(Library\)的简称,中文名称为标准模板库,从根本上讲, 就是各种\(STL\)容器的集合,容器可以理解为能够实 ...

  2. mybatis_高级

    注解方式: 不需要配置文件 @select等注解直接放在接口mapper里 多表操作: @Select("select * from user1") @Results({ @Res ...

  3. MybatisPlus入门到进阶

    1.创建一个SpringBoot项目 2.导入相关依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...

  4. Kernel Memory 入门系列:快速开始

    Kernel Memory 入门:Quick Start 了解了用户问答和文档预处理的流程之后,我们就可以直接开始使用Kernel Memory了. 1. 安装 项目中只需要通过NuGet安装Micr ...

  5. java方法的定义与执行

    java中的方法在类中定义. 定义方法格式: 访问修饰符    返回值类型    方法名(参数列表){   ...  执行内容  ...   return 返回值; } 访问修饰符:表示方法在哪里能被 ...

  6. DevExpress源码编译(部分翻译)

    环境准备(DevExpress v18.2 ~22.2): vs2015至2022版本 .net framework 4.7.2或更高(实际我们项目用4.5.2可以编译,并不是所有的工程都需要高版本) ...

  7. 《代码整洁之道 Clean Code》学习笔记 Part 2 - 写出优雅的函数的10条建议

    大师级程序员把系统当作故事来讲,而不是当作程序来写. TLDR 短小(不超过 20 行.缩进不超过 2 层) 只做一件事 保持在同一抽象层级 用多态替代 switch 取个好的函数名 函数参数越少越好 ...

  8. 文心一言 VS 讯飞星火 VS chatgpt (58)-- 算法导论6.4 2题

    文心一言 VS 讯飞星火 VS chatgpt (58)-- 算法导论6.4 2题 二.试分析在使用下列循环不变量时,HEAPSORT 的正确性:在算法的第 2~5行 for 循环每次迭代开始时,子数 ...

  9. Nacos 本地单机版部署步骤和使用

    本系列是 Spring Cloud 微服务实战系列教程.之前在 <Spring Cloud Eureka 入门 (一)服务注册中心详解> 聊过 Spring Cloud Eureka.那今 ...

  10. 带你认识多模数据库GeminiDB架构与应用实践

    本文分享自华为云社区<多模归一,一生万物--华为云多模数据库GeminiDB架构与应用实践>,作者: GaussDB 数据库 . 在这个信息爆炸的时代,数据的管理和应用变得越来越重要.互联 ...