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. React 中虚拟DOM是什么,为什么需要它?

    注意:本节主要讲React中的虚拟DOM,但是虚拟DOM并不是React中特有的内容. 1. React 中虚拟 DOM是什么? 虚拟DOM是对真实DOM的描述,虚拟DOM是JS对象,实际上就是 JS ...

  2. [USACO2007OPENS] Fliptile S

    题目描述 FJ 知道,智商高的奶牛产奶量也大,所以他为奶牛们准备了一个翻动瓦片的益智游戏. 在一个 \(M \times N\) 的方阵上(\(1 \leq M,N \leq 15\)),每个格子都有 ...

  3. 【Python】【OpenCV】定位二维码

    相较于BarCode,QRCode有明显的特征区域,也就是左上角.右上角.左下角三个"回"字区域,得益于hierarchy中,父子关系的轮廓是连续的(下标),所以这个时候我们就可以 ...

  4. Python——第三章:内置函数(上)

    Python中的内置函数 基础数据类型相关(38) 和数字相关(14) 数字类型(4) bool--布尔型 int--整型 float--浮点型 complex--虚数 机制转换(3) bin--二进 ...

  5. shared_ptr 自定义 deleter 删除器

    一些结论 如果 shared_ptr 管理的资源不是 new 分配的内存,才考虑自定义删除器,这也是为什么 make_shared 不支持自定义删除器的原因,因为 make_shared 就是通过 n ...

  6. CUDA个人入坟笔记

    CUDA是建立在NVIDIA的GPUs上的一个通用并行计算平台和编程模型,基于CUDA编程可以利用GPUs的并行计算引擎来更加高效地解决比较复杂的计算难题.近年来,GPU最成功的一个应用就是深度学习领 ...

  7. .NET开源免费功能最全的商城项目

    前言 今天给大家推荐一个功能丰富.免费.灵活且可定制的开源电子商务解决方案:nopCommerce.大家假如有商城需求可以直接使用该项目进行二次开发,省时省力. 项目介绍 nopCommerce在.N ...

  8. CUDA C编程权威指南:1.2-CUDA基础知识点梳理

      主要整理了N多年前(2013年)学习CUDA的时候开始总结的知识点,好长时间不写CUDA代码了,现在LLM推理需要重新学习CUDA编程,看来出来混迟早要还的. 1.闭扫描和开扫描   对于一个二元 ...

  9. 经验说丨华为云视频Cloud Native架构下实践

    摘要:来自华为云直播的段亮详细介绍华为云视频在Cloud Native的转型实践中遇到的问题.挑战以及解决之道. 随着云基础设施服务以及边缘计算技术的发展,Cloud Native,即云原生,架构理念 ...

  10. 盘点Python 中字符串的常用操作

    摘要:盘点 Python 中字符串的几个常用操作,对新手极度的友好. 本文分享自华为云社区<盘点 Python 中字符串的常用操作,对新手极度友好>,作者:TT-千叶 . 在 Python ...