采用rem布局时,把以下代码粘到js文件内

function font(w) {
    var w = w || 640,
        docEl = document.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / w) + ‘px‘;
        };
    if (!document.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener(‘DOMContentLoaded‘, recalc, false);
}

font();

(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 = 100 * (clientWidth / 640) + ‘px‘;
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

  

时间: 2024-10-27 17:57:28

采用rem布局时,把以下代码粘到js文件内的相关文章

JavaScript的8行代码搞定js文件引入问题

单页面的操作,免不了会有各种jsp的嵌套问题,一个操作页面里面可能涉及到几十甚至上百个jsp页面. 平常我们对用到的js文件的引入,都会放到index的header里面.如图: 但是,让我们思考三个问题: 1.当业务需要,用到iframe的时候,那么iframe页面将不能再直接调用index引入的js文件 2.假如我这个项目有100个jsp页面,有一个js文件只有其中一个jsp要使用,我将这个js放到index的header区,每次一加载项目都会加载它,是不是延长了项目加载时间. 3.针对问题二

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

iPad纯代码实现横竖屏切换,采用相对布局

因为本来不喜欢使用StoryBoard.xib等可视化编程,一直使用的纯代码布局,但是纯代码布局的iOS开发者会遇到一个问题,就是横竖屏适配的问题,如果使用自动布局,那些约束的,写起来都是不难,但是控件之间的关联太多,以至于维护性很差.本人由于工作的原因,做iPad开发,那就必须要解决横竖屏适配的问题,于是就有了这篇文章. 代码如下: // //  ViewController.swift //  iPad横竖屏切换 // //  Created by zhangxu on 16/7/30. /

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

//以下代码放到一个adapt.js文件当中 (function (doc, win) {   var docEl = doc.documentElement,     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     recalc = function () {       var clientWidth = docEl.clientWidth;       if (!clientWi

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

第130天:移动端-rem布局

一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小. 淘宝的方案总结为:根据设备设备像素比设置scale的值,保

rem布局原理深度理解(以及em/vw/vh)

一.前言 我们h5项目适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人响应式实现原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw.vh等.所以打算写博客总结一下,以加深理解. 二.几个概念 这里就不讲那些,物理像素.设备像素比了,可以自己查阅.要去理解rem/em/vm/vh等,首先要直观的去理解他们到底是什么?理解好了,后面就好办了.其实这几个都是css单位,就像我们常用的px一样,只不过他们都是相对单位.

细说移动端 经典的REM布局 与 新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 方案选择 食用方式 一.前言 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些 布局概念: 1. 静态布局 直

一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi