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

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

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. RabbitMQ的基本概念

    1:基本概念 ConnectionFactory(连接工厂): 生产Connection的的工厂 Connection(连接):是RabbitMQ的socket的长链接,它封装了socket协议相关部 ...

  2. inotify和rsync实现数据实时同步

    数据的实时同步 实现实时同步 要利用监控服务(inotify),监控同步数据服务器目录中信息的变化 发现目录中数据产生变化,就利用rsync服务推送到备份服务器上 实现实时同步的方法 ino ...

  3. 【转】PS1应用-修改linux终端命令行字体颜色

    原文链接:https://www.jianshu.com/p/4239d3ea72fe cd ls -la vim .bashrc 在.bashrc中加入这一行: PS1="\[\e[37; ...

  4. rsync 应用总结

    rysnc server端 1.vim /etcrsyncd.conf (用户rsync,目录,模块,非系统虚拟用户及密码文件) 2.创建共享目录 /data/www/{www,bbs,blog} 3 ...

  5. 搭建配置私服-nexus ，Maven中的使用——3

    1. 下载nexus包,将bin目录添加到PATH路径下去   2. 修改: bin/jsw/conf 下面的wrapper.conf文件: 修改java命令绝对路径   修改之后:   3.  进入 ...

  6. flink相关

    flink一.简单实时计算方案 假如现在我们有一个电商平台,每天访问的流量巨大,主要访问流量都集中在衣服类.家电类页面,那么我们想实时看到这两类页面的访问量走势(十分钟出一个统计量),当做平台的重要指 ...

  7. Junit加载Spring容器作单元测试

    阅读目录 > 基本的搭建 > 常见的用法 如果我们需要对我们的Service方法作单元测试,恰好又是用Spring作为IOC容器的,我们可以这么配置Junit加载Spring容器,方便做单 ...

  8. .Net Core：Middleware自定义中间件

    新建standard类库项目,添加引用包 Microsoft.AspNetCore 1.扩展IApplicationBuilder using Microsoft.AspNetCore.Builder ...

  9. BZOJ 4025 二分图 LCT维护最大生成树

    怎么说呢,我也不知道该咋讲,你就手画一下然后 yy 一下就发现这么做是对的. 为什么我明明都想出来了,却还是讲不出来啊~ #include <cstdio> #include <ve ...

  10. E. The Contest （ 简单DP || 思维 + 贪心）

    传送门 题意: 有 n 个数 (1 ~ n) 分给了三个人 a, b, c: 其中 a 有 k1 个, b 有 k2 个, c 有 k3 个. 现在问最少需要多少操作,使得 a 中所有数 是 1 ~ ...