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. 算法与数据结构——kpm算法

  2. 解决OpenCV编译时./bin: error while loading shared libraries: libopencv_highgui.so.3.2: cannot open的问题

    1.问题 安装好了opencv后,用其去检测是否可以使用时,出现了如下的问题: 2.解决 参考这篇博文点击 的配置环境即可解决

  3. 数字孪生技术结合GIS系统能在农业领域作出什么改变?

    数字孪生技术和地理信息系统(GIS)是两个独立但高度互补的领域,它们的结合在农业领域具有巨大的潜力,可以带来巨大的改变.在这篇文章中,我们将讨论数字孪生技术和GIS系统如何协同作用,为农业带来创新和可 ...

  4. JavaScript数组及方法总结

    数组的创建方法 1.常规方式: var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myC ...

  5. Ubuntu 命令使用方法

    apt-get 用作于deb包 yum作用于tar包(也可以运作于rpm包) 首先用yum list wget检查一下你的虚拟机有没有安装wget,如果安装了下面图中会显示 @dvd ,我的没有安装所 ...

  6. 在linux系统上怎么获取命令的帮助信息及man文档划分

    如何在linux系统上获取命令的帮助信息及man文档的章节划分 1.命令 -- help 2.man 命令 后者更加详细 首先帮助中尖括号<>和方括号[]以及省略号...的含义, 在方括号 ...

  7. springboot整合hibernate(非JPA)(一)

    springboot整合hibernate(非JPA)(一) springboot整合hibernate,非jpa,若是jpa就简单了,但是公司项目只有hibernate,并要求支持多数据库,因此记录 ...

  8. JavaFx之controlsfx8下载(十七)

    JavaFx之controlsfx8下载(十七) controlsfx是JavaFx功能的扩展补充,这里我使用java8,我将源码下载下来并编译好jar,在java8的环境双击运行runSamples ...

  9. window10 AppX Deployment Service (AppXSVC)占用大量内存导致资源管理器卡死无响应

    window10 AppX Deployment Service (AppXSVC)占用大量内存导致资源管理器卡死无响应,导致无法进入桌面打开软件等等. 1.打开任务管理的情况下,先结束卡死的资源管理 ...

  10. 介绍一个prometheus监控数据生成工具

    prometheus-data-generator Prometheus数据模拟工具旨在通过配置文件模拟Prometheus数据,用于测试和开发目的.该工具允许您生成用于测试和开发的合成数据. 配置 ...