rem布局,使用手机端,pc大屏——亲测好用
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大屏——亲测好用的更多相关文章
- REM布局计算,移动端,pc端有兼容性)
rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...
- 手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- (转)手机端html5触屏事件(touch事件)
本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...
- 自适应reset.js布局 用于手机端页面编写
以下是reset.js具体内容,是从淘宝网站拔下来的.把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以4 ...
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...
- 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法
先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...
- vue手机端横屏竖屏切换
1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} } 2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...
- 转:手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- 手机端Swiper 触屏滑动
在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...
- 仿今日头条app手机端顶部触屏滑动导航
swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- 算法与数据结构——kpm算法
- 解决OpenCV编译时./bin: error while loading shared libraries: libopencv_highgui.so.3.2: cannot open的问题
1.问题 安装好了opencv后,用其去检测是否可以使用时,出现了如下的问题: 2.解决 参考这篇博文点击 的配置环境即可解决
- 数字孪生技术结合GIS系统能在农业领域作出什么改变?
数字孪生技术和地理信息系统(GIS)是两个独立但高度互补的领域,它们的结合在农业领域具有巨大的潜力,可以带来巨大的改变.在这篇文章中,我们将讨论数字孪生技术和GIS系统如何协同作用,为农业带来创新和可 ...
- JavaScript数组及方法总结
数组的创建方法 1.常规方式: var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myC ...
- Ubuntu 命令使用方法
apt-get 用作于deb包 yum作用于tar包(也可以运作于rpm包) 首先用yum list wget检查一下你的虚拟机有没有安装wget,如果安装了下面图中会显示 @dvd ,我的没有安装所 ...
- 在linux系统上怎么获取命令的帮助信息及man文档划分
如何在linux系统上获取命令的帮助信息及man文档的章节划分 1.命令 -- help 2.man 命令 后者更加详细 首先帮助中尖括号<>和方括号[]以及省略号...的含义, 在方括号 ...
- springboot整合hibernate(非JPA)(一)
springboot整合hibernate(非JPA)(一) springboot整合hibernate,非jpa,若是jpa就简单了,但是公司项目只有hibernate,并要求支持多数据库,因此记录 ...
- JavaFx之controlsfx8下载(十七)
JavaFx之controlsfx8下载(十七) controlsfx是JavaFx功能的扩展补充,这里我使用java8,我将源码下载下来并编译好jar,在java8的环境双击运行runSamples ...
- window10 AppX Deployment Service (AppXSVC)占用大量内存导致资源管理器卡死无响应
window10 AppX Deployment Service (AppXSVC)占用大量内存导致资源管理器卡死无响应,导致无法进入桌面打开软件等等. 1.打开任务管理的情况下,先结束卡死的资源管理 ...
- 介绍一个prometheus监控数据生成工具
prometheus-data-generator Prometheus数据模拟工具旨在通过配置文件模拟Prometheus数据,用于测试和开发目的.该工具允许您生成用于测试和开发的合成数据. 配置 ...