JS适配问题。

动画requestAnimFrame + cancelAnimationFrame

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function( callback ){
          window.setTimeout(callback, 1000 / 60);
        };
})();

window.cancelAnimationFrame =(function(){
    return window.cancelAnimationFrame ||
        window.cancelRequestAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.webkitCancelRequestAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.mozCancelRequestAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.msCancelRequestAnimationFrame ||
        window.oCancelAnimationFrame ||
        window.oCancelRequestAnimationFrame ||
        window.clearTimeout;
})();
时间: 2024-08-07 03:03:31

JS适配问题。的相关文章

通过js适配不同的屏幕大小

// 通过js适配不同的屏幕大小(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始fo

移动端rem.js适配屏幕

九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多说,今天就来谈谈移动端的rem适配...本文将从rem是什么.为什么要用rem适配.怎么用rem来讲解,保证浅显易懂... 1.什么是rem rem(font size of the root element)是指相对于根元素(<html>)的字体大小的单位.简单的说它就是一个相对单位.看到rem

移动端适配js

移动端适配方案非常多,入行两年来始终没有一直使用一个标准,每个项目都按照业务需求来做适配 方案一: 最初听李彦辉老师的课程使用rem 布局了一段时间,但是字体计算比较麻烦,也不太精确 方案二: 偶然在Q群里一群友分享的 动态改变根节点字体的方案布局,头部引用一个js.按照设计图的像素写rem,100px = 1rem //控制字体 var calculate_size = function() { var BASE_FONT_SIZE = 100; var docEl = document.do

对移动端适配自己的理解

在写移动端H5页面的时候,最让人头疼的就是适配问题: 接下来是我给我的最佳的解决方案和一个小例子 第一步:适配js(rem.js) /** *这里我们提取了一个公式(rem表示基准值) *rem基准值 = document.documentElement.clientWidth * dpr / 10 *如果有一个区块,在psd文件中量出:宽高750×300px的div,那么如何转换成rem单位呢? *rem = px / rem基准值 ; **/;(function(){ var docEl =

前端pc版的简单适配

我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920的做的简单的js适配. <script type="text/javascript"> var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth winWidth = win

前端移动端的rem适配计算原理

rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算. 计算原理: 1 屏幕宽为 clientWidth(px). 设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px)

详细解剖大型H5单页面应用的核心技术点

阐述下项目 Xut.js 开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用,只是为了作者开发方便同步修改代码而上传的源码 描述下,项目提出的概念“无需程序员编程”可批量制作app应用.分2大块,1块是客户端(PPT),默认扩展插件提供用户编辑的界面,平台会把设计逻辑与界面数据编译成前端数据资源包(前端能处理的js.css.图片等资源了),另一个大块就是纯前端部分(Xut.

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)

用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-device-width:320px) { html { font-size:10px; } } @media only screen and (max-width: 640px), only screen and (max-device-width:640px) { html { font-size:20p