分享一个很棒的东西：：：：：

优点：不用考虑适配问题，按设计稿进行固定尺寸开发。

1、将下面这段 js 放在页面的<head>中

function bodyScale() {

    var devicewidth = document.documentElement.clientWidth;

    var scale = devicewidth / ;  // 分母——设计稿的尺寸

    document.body.style.zoom = scale;

}

window.onload = window.onresize = function () {

    bodyScale();

};

2、按照设计稿进行固定开发

设计稿切换至px模式，就直接按标注的写啦~

Js 实现页面缩放的更多相关文章

  1. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. 无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）

    1.无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...

  3. js获取页面缩放比例

    今天在网上看到一位大神写的一篇文章,出处记不得了,只是因为我在做项目的时候需要用到所以看了一眼. 经理要求我把两张图表上下排列(非响应式的)改成可以适配浏览器的,刚开始只是想改样式,看到代码才发现原来 ...

  4. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  5. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  6. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  7. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  8. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  9. JS刷新页面总和！多种JS刷新页面代码!

    1)<meta http-equiv="refresh"content="10;url=跳转的页面">10表示间隔10秒刷新一次2)<scri ...

随机推荐

  1. 【外网不好用】可以尝试添加dns即可解决上不去外网的问题。

    可以将IPv4这里的DNS修改成以下内容再尝试上网试试.

  2. MYSQL8.0以上版本ROOT密码报错及修改

    在登录数据库过程中,如果遇到忘记root密码时,该如何解决? 1.使用管理员权限打开命令提示符,在命令行中输入: net stop mysql  2.待mysql服务停止后,输入: mysqld -- ...

  3. nmap中文帮助文档

    简介: Nmap(“ Network Mapper ”)是用于网络探索和安全审核的开源工具.它设计用于快速扫描大型网络,尽管它可以在单个主机上正常运行.Nmap以新颖的方式使用原始IP数据包来确定网络 ...

  4. arduino安装出现驱动程序不适用于该平台

    之前重新安装了系统,然后重新安装arduino驱动的时候出现了之前没遇到过的问题,这里记录一下. 现在装的是win7 64位的系统,先去官方下载(官方下载慢的,可以去相关论坛下载),有安装版和解压版的 ...

  5. 剑指Offer编程题(python)——二叉树

    1.重建二叉树 """ 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1,2,4 ...

  6. 指定js文件不使用 ESLint 语法检查

    整个文件范围内禁止规则出现警告 将/* eslint-disable */放置于文件最顶部 /* eslint-disable */ alert('foo'); 在文件中临时禁止规则出现警告 将需要忽 ...

  7. 总结 1121 Java面向对象

    总结 Java面向对象的基础 三大特征: 封装(抽象),继承,多态 面向对象的内存分析: 栈, 堆, 代码区, 静态区 this: 代表当前对象本身 有时候需要把当前调用对象进行传递,那么就可以使用t ...

  8. mysql 1040 连接数太多 mysql Error 1040 too many connection解决办法

    近在用SpringMVC开发的时候,突然出现1040 too many connection的错误,看错误的意思是连接的人数太多了.百度经验:jingyan.baidu.com 方法/步骤   1 当 ...

  9. Centos7下Nexus3的安装和配置

    参考文档:https://help.sonatype.com/repomanager3 1.要使用nexus服务需要安装jdk和maven 1.1.jdk下载地址:https://www.oracle ...

  10. P5043【模板】树同构（[BJOI2015]树的同构）

    思路:树哈希 提交:1次 题解: 怕不是用的oi-wiki上的公式: \[f_u=size_u\times\sum f_{son_{u,i}}\times Base^{i-1}\] #include& ...