超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码

//以下代码放到一个adapt.js文件当中
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 20 * (clientWidth /750) + ‘px‘;
    };
 
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

function goTopEx() { 
var obj = document.getElementById("goTopBtn"); 
function getScrollTop() { 
return document.documentElement.scrollTop + document.body.scrollTop; 
} 
function setScrollTop(value) { 
if (document.documentElement.scrollTop) { 
document.documentElement.scrollTop = value; 
} else { 
document.body.scrollTop = value; 
} 
} 
window.onscroll = function() { 
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none"; 
} 
obj.onclick = function() { 
var goTop = setInterval(scrollMove, 10); 
function scrollMove() { 
setScrollTop(getScrollTop() / 1.1); 
if (getScrollTop() < 1) clearInterval(goTop); 
} 
} 
}

html文档代码:

<script src="js/adapt.js"></script>
<-- 以下是超过高度显示回到顶部代码 -->
<div id="goTopBtn"><img src="img/index_03.png"/></div>
             <script type=text/javascript>goTopEx();</script>
时间: 2024-12-24 10:40:29

超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码的相关文章

移动端布局之路-----rem布局

rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px. /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大

手机端和PC端分别加载不同的js文件

分手机端和PC端其实方法很多,我们在响应式设计.响应式网站建设中经常碰到此类需求.下面说说我们在项目中遇到的需求: 手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件) 第一种方法(简单型): <script type="text/javascript"> // 根据屏幕尺寸 if (screen && screen.width > 480) { document.write('<script type=&q

精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换

精通移动端布局 - 概念篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换

Html5移动端页面自适应布局详解(阿里rem布局)

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

响应式布局和移动端布局

响应式布局就是响应式设计方案呈现的效果.具体就是页面的布局会根据不同设备的显示面积(主要是宽度)的不同而呈现不同的布局,这个效果是比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现的布局更灵活,可读性更强.当然对研发的要求也更高(比如说如何更好地让图片,适配,UI动画自适应各种布局).响应式设计一般来说是一套设计方案解决所有的设备的自适应问题.对应的样式文件可能是多个,也可以只写一个(在一个css文件声明不同的media query就可以). 移动端布局就是传统的固定宽度或者弹性布

移动端布局Demo测试

上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起!                                需求一:实现下图效果,注意不同手机的型号:原生称为适配,我们称为自适应不变形 思路一:btn+ima布局风格 <div class="row margin-top"> <div class="col-sm-12&qu

移动端布局总结

最近做了几个移动端的项目,因为第一次接触移动端的布局,所以踩了几个坑,今天总结一下,有不对的地方欢迎大家提意见. 移动端布局需要考虑为不同分辨率的设备都提供一个出色的使用体验,下面我来总结一下移动端布局的方法. 借助库 比如Bootstrap和MUI都可以实现自适应布局,借助于他们定义好的样式,我们很少需要自己重新写样式,节省了大量的开发时间,推荐使用.在样式不能满足要求的情况下,再自己重写样式. 允许网页宽度自动调整 首先要想自适应必须加入一行viewport标签: <meta name=&quo