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

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

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

  1. function bodyScale() {
  2.     var devicewidth = document.documentElement.clientWidth;
  3.     var scale = devicewidth / ;  // 分母——设计稿的尺寸
  4.     document.body.style.zoom = scale;
  5. }
  6. window.onload = window.onresize = function () {
  7.     bodyScale();
  8. };

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. 升级xcode11&ios13的坑

    Swift Packages 目前Pod跟SPM的兼容还没做好,配置好SPM后,Pod不能进行正常更新,先配置好Pod再集成SPM则没有问题 Pod以后的更新可能会解决这个问题,也会有越来越多的库支持 ...

  2. linux文件系统初学

    Linux磁盘分区和目录 Linux发行版之间的差别很小,差别主要表现在系统管理的特色工具以及软件包管理方式的不同. Windows的文件结构是多个并列的树状结构,最顶部是不同的磁盘(分区),如C,D ...

  3. windows环境安装haproxy及初步配置负载均衡使用示例

    安装HaProxy 首先需要下载windows环境下需要文件,这里下载的是一个别人编译好的一个文件,这里省去了编译的过程,使用的版本是haproxy-1.7.8. 下载后直接解压到对应的目录下.示例( ...

  4. Axure工作区间

    Axure的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图.无需编程就可以在线框图中定义简单链接和高级交互.Axure可一体化生成线框图.HTML交互原型.规格说明Word文档.以下是 ...

  5. 剑指Offer的学习笔记（C#篇）-- 孩子们的游戏(圆圈中最后剩下的数)

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  6. springboot mybatis 的SQL异常不输出错误到控制台问题排查

    项目中使用springboot集成 mybatis,运行过程中查询SQL列在表中不存在,但系统不输出任何错误到控制台 但SQL是打印的,只是没有任何异常信息 将SQL复制出来到数据库中运行,才发现错误 ...

  7. elasticsearch查询：启动项目报错No property ... found for...Did you mean '...'?

    网上找的案例是: 实体类字段定义:private String sku_no;dao中接口名定义:Goods findBySkuNo(String skuNo);spring-data按照接口方法定义 ...

  8. VisualGC,JVMStat安装配置

    通过VisualGC工具可以通过图形化方式查看JVM垃圾收集的情况. http://www.oracle.com/technetwork/java/jvmstat-142257.html 下载 htt ...

  9. app连接线上数据库进行本地接口测试

    1.将开发环境下数据库配置改为生产环境下的数据库连接 2.备份生产环境下的数据库数据以及结构,使用Postman请求开发(本地)环境下的接口 3.打开手机上安装的线上app改动接口时查看app是否发生 ...

  10. 25、自动装配-@Profile根据环境注册bean

    25.自动装配-@Profile根据环境注册bean 指定组件在哪个环境的情况下才能被注册到容器中 加了环境标识的,只有这个环境被激活才能注册到组件中 默认是default环境 写在类上,整个配置类的 ...