手机端转换rem适应

2024-10-21 23:54:47

话不多说，请看代码：

 <script>
  (function() {
   var changeRem = function() {
    document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px';
   };
   changeRem();
   var t;
   window.addEventListener('resize', function() {
    clearTimeout(t);
    t = setTimeout(changeRem, 300);
   }, false);
   window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
     clearTimeout(t);
     t = setTimeout(changeRem, 300);
    }
   }, false);
  }());
 </script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

手机端页面rem宽度自适应脚本

什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及
手机端转换rem适应

话不多说,请看代码: <script> (function() { var changeRem = function() { document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px'; }; changeRem(); var t; window.addEventListener('resize', function() { clearTim
JS手机端touch事件计算滑动距离的方法示例

本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar
JS制作手机端自适应缩放显示

JS制作手机端自适应缩放显示示例一: <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>
基于Jquery代码实现支持PC端手机端幻灯片代码

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 效果演示源码下载 html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg&q
JS前端开发判断是否是手机端并跳转操作（小结）

常用跳转代码 <script type="text/javascript"> // borwserRedirect (function browserRedirect(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'; var bIsIphone = sUserAgent.match(/iphone os/i) ==
手机端转盘抽奖代码分享

演示效果如下: 不废话了,直接给大家贴代码了. html部分 <div class="turntableWap top10"> <table border="0" cellspacing="0"> <tr> <td tag="0"><img src="../images/4.png" alt="4元"></td> &
canvas实现手机端用来上传用户头像的代码

废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> label{ height:40px; width:100px; border:1px solid #666; display:block; text-alig
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件.分享给大家供大家参考.具体如下: 完整实例代码点击此处本站下载. 用法 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="display:none;">这是内容</div> <sc
H5手机端多文件上传预览插件

基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的

手机端转换rem适应

相关推荐

随机推荐