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

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

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. iOS7 新后台及下载SDK介绍

    在iOS7以前的系统中,App默认是不能后台运行的,如果要后台运行,可以采用以下两类方法: (1)使用beginBackgroundTaskWithExpirationHandler函数,向系统申请一 ...

  2. ionic 局部刷新

    $scope.$on('$ionicView.beforeEnter', console.log("刷新"); })

  3. 如何在SAP Kyma的控制台里扩展新的UI

    方法是创建一个新的resource,类型为ClusterMicroFrontend. 使用命令行kubectl get ClusterMicroFrontend查看这些UI扩展: 最后自定义的UI出现 ...

  4. oracle通过一个字段分组，取另一个字段的最大值

    select * from bdcdj.lqentry1 a  where 顺序号 in (select max(顺序号) from bdcdj.lqentry1 b WHERE b.archival ...

  5. Flutter——BottomNavigationBar组件（底部导航栏组件）

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  6. C语言Makefile文件制作

    本文摘抄自“跟我一起写Makefile ”,只是原文中我自己感觉比较精要的一部分,并且只针对C语言,使用GCC编译器. 原文请看这里:http://wiki.ubuntu.org.cn/%E8%B7% ...

  7. FreeRTOS编程风格

    数据类型 基本使用的是标准C里面的数据类型,但是针对不同的处理器,对标准C的数据类型又进行了重定义: 在FreeRTOS中详细的数据类型重定义在portmacro.h这个文件中,具体如下: /* Ty ...

  8. contos7下安装redis&redis的主从复制的配置&redis 哨兵（sentinel）

    一.centos7下安装redis 1.解压 redis-5.0.5.tar.gz 压缩文件 解压命令为: .tar.gz -C redis 解压后进入 redis 工作目录,进入 redis-5.0 ...

  9. （1）openstack-Rabbitmq 集群部署

    一.前期准备   (1)条件:准备3台linux系统,确保配置好源,及epel源  yun1,yun2,yun3   (2)三台机器能够静态解析彼此   (3)设置可以无密钥登陆  ssh-keyge ...

  10. 2018/7/31--zznu-oj-问题 G: 方差 普拉斯--【两重暴力循环求方差即可！】

    问题 G: 方差 普拉斯 时间限制: 1 Sec  内存限制: 128 MB提交: 94  解决: 17[提交] [状态] [讨论版] [命题人:admin] 题目描述 方差(样本方差)是每个样本值与 ...