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. redis的基本命令,并用netty操作redis(不使用springboot或者spring框架)就单纯的用netty搞。

    大家如果对使用netty搞这些http请求什么的感兴趣的,可以参观我自己创建的这个项目. nanshaws/nettyWeb: 复习一下netty,并打算做一个web项目出来 (github.com) ...

  2. 通用 Mapper 的批量插入实现

    具体的 SQL 模板实现如下所示: import org.apache.ibatis.mapping.MappedStatement; import tk.mybatis.mapper.MapperE ...

  3. 【OpenVINO 】在 MacOS 上编译 OpenVINO C++ 项目

    前言 英特尔公司发行的模型部署工具OpenVINO模型部署套件,可以实现在不同系统环境下运行,且发布的OpenVINO 2023最新版目前已经支持MacOS系统并同时支持在苹果M系列芯片上部署模型.在 ...

  4. 7、Flutter GridView网格布局组件(遍历)

    GridView创建网格列表主要有下面三种方式 1.可以通过GridView.count 实现网格布局    一行的 Widget 数量 class HomePage extends Stateles ...

  5. MySQL基础篇:第九章_详解流程控制结构

    流程控制结构 系统变量 一.全局变量 作用域:针对于所有会话(连接)有效,但不能跨重启 查看所有全局变量 SHOW GLOBAL VARIABLES; 查看满足条件的部分系统变量 SHOW GLOBA ...

  6. 小熊派开发实践丨漫谈LiteOS之传感器移植

    摘要:本文基于小熊派开发板简单介绍了如何在LiteOS中移植传感器,从而实现对于传感器的相关控制. 1 hello world 相信大家无论在学习编程语言开始的第一个函数应该是HelloWorld,本 ...

  7. AI辅助宫颈癌筛查技术全球居首,守护者的力量来源是?

    宫颈癌,是常见的妇科恶性肿瘤.宫颈癌发病率在妇科恶性肿瘤中仅次于乳腺癌,但同时也是医学界公认的病因明确,预防有疫苗.且早期治愈率高的病症!病理形态学诊断被医学界公认为疾病诊断的"金标准&qu ...

  8. JS对象拷贝:深拷贝和浅拷贝

    摘要:对象拷贝,简而言之就是将对象再复制一份,但是,复制的方法不同将会得到不同的结果. 本文分享自华为云社区<js对象深浅拷贝,来,试试看!>,作者: 北极光之夜.. 一.速识概念: 对象 ...

  9. 带你了解AKG正反向算子注册+关联流程

    摘要:简要介绍一下akg正反向算子的注册和关联流程. 本文分享自华为云社区<AKG正反向算子注册+关联>,作者:木子_007 . 一.环境 硬件:eulerosv2r8.aarch64 m ...

  10. 开心档之MySQL 数据类型

    MySQL 数据类型 MySQL 中定义数据字段的类型对你数据库的优化是非常重要的. MySQL 支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL 支持所有 ...