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. [算法考研笔记]mm算法随笔[成绩划分][回溯0-1][得分][字段和][聪明小偷][股票买卖]

    mm算法随笔 学习笔记(回溯算法) 回溯 <---->递归1.递归的下面就是回溯的过程 回溯法是一个 纯暴力的 搜索.有的时候暴力求解都没有办法,用回溯可以解决. 回溯法解决的问题: 组合 ...

  2. 轻量型 Web SCADA 组态软件 TopLink

    图扑物联 发布了一款工业物联网边缘侧应用场景的轻量型 Web SCADA 组态软件 Iotopo TopLink.该产品采用 B/S 架构,提供 Web 管理界面,软件包大小仅 23MB,无需安装客户 ...

  3. Oracle参数文件spfile

    spfile:server parameter file. spfile只能通过OEM(oracle enterprise manager)软件或者alter system命令进行修改. spfile ...

  4. 公私两用U盘管理软件:保障企业数据安全

    随着信息技术的不断发展,企业对数据安全的关注程度越来越高.U盘作为一种便携式的移动存储设备,在工作中被广泛使用,但其本身也存在很多安全隐患,会面临数据泄漏和未经授权访问的风险.例如:企业研发部机密文档 ...

  5. 在Linux服务器上装jenkins(方式一:war包)

    官网下载jenkins https://www.jenkins.io/zh/download/ 官网下载太慢,可以去清华镜像下载(百度搜索:清华镜像) 下载的文件是jenkins.war 把安装文件放 ...

  6. CentOS安装openGauss2.0.1

    CentOS安装openGauss2.0.1 OpenGauss是一款开源关系型数据库管理系统,采用木兰宽松许可证v2发行.openGauss内核源自PostgreSQL,深度融合华为在数据库领域多年 ...

  7. JPA object references an unsaved transient instance - save the transient instance before flushing

    nested exception is org.springframework.dao.InvalidDataAccessApiUsageException: org.hibernate.Transi ...

  8. 神经网络入门篇:直观理解反向传播(Backpropagation intuition)

    详细推导反向传播 下图是逻辑回归的推导: 回想一下逻辑回归的公式(参考公式1.2.公式1.5.公式1.6.公式1.15) 公式1.38: \[\left. \begin{array}{l} {x }\ ...

  9. ModelArts黑科技揭秘|弹性训练,让训练资源张弛有度

    摘要:AI进入产业的门槛变高,开发者想要做出优秀的AI模型就不得不在算力和成本之间折中,怎么办? 为帮助企业在AI落地过程中进一步实现降本增效,华为云推出AI黑科技--弹性训练. 今年,AI界最被热议 ...

  10. 云小课|MRS基础原理之Oozie任务调度

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:Oozie是一个基 ...