只要在每个页面加入这段js他会把每个页面平均分成横向25rem,纵向47rem//页面布局

<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
window.clientWidth = docEl.clientWidth;
if(!window.clientWidth) return;
docEl.style.fontSize = 30 * (window.clientWidth / 750) + 'px';
window.base = 30 * (window.clientWidth / 750);
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>

h5整体页面布局的更多相关文章

  1. h5单页面布局

    前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局,代码很 ...

  2. app开发,H5+CSS3页面布局小tips

    1.inline-block使用后带来的间隔影响 2.竖线的处理 3.ssh公匙 4.星星组件的巧妙用法 5.api.js的$api对象与 安卓原生引擎的api对象,均相当于jQuery的$对象 6. ...

  3. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

  7. 关于html页面布局

    之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高 当div不设计长宽高而是自动由内部控件”撑“ ...

  8. css页面布局

    写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...

  9. Bootstrap入门二:响应式页面布局

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

随机推荐

  1. CF习题集一

    CF习题集一 一.CF915E Physical Education Lessons 题目描述 \(Alex\)高中毕业了,他现在是大学新生.虽然他学习编程,但他还是要上体育课,这对他来说完全是一个意 ...

  2. 企业签名和TF签名哪个好?TF签名和企业签名怎么选?

    很多开发者在App无法上架Appstore,需要内测或者开放给苹果用户使用的时候,需要选择企业签名来帮助自己的App开放下载链接,给苹果用户使用.苹果企业签名的类型有很多,TF签名最近又很火爆,那么企 ...

  3. requests上传文件,又要上传data的处理

    前话 最近在自己学着弄接口自动化框架,因为要封装一个发送请求的父类,其中有考虑到上传文件,以及同时上传文件,和传递其他字段数据,遇到点小问题 这里解决下. 实例的接口数据 参考文档 来自fastapi ...

  4. iOS CALayer 简单介绍

    https://www.jianshu.com/p/09f4e36afd66 什么是CALayer: 总结:能看到的都是uiview,uiview能显示在屏幕上是因为它内部的一个层calyer层. 在 ...

  5. Python Tricks —— 使用 pywinrm 远程控制 Windows 主机

    启用 WinRM 远程服务: winrm quickconfig 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不 ...

  6. SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤

    背景 好像是上周四,看到微信群有人说java有轮子swagger-bootstrap-ui,而c#,就是找不到. 于是我一看,就说大话:"这个只是一套UI,他这个有开源地址么" 被 ...

  7. 集中式版本管理系统 SVN使用

    SVN的使用 SVN的文件状态 黑色:正常的文件 黄色文件(在Android Stduio中颜色):被忽略的文件 红色:文件没有Add的新文件(没有加入版本控制subversion中) 绿色:新文件A ...

  8. 个人电脑搭建ftp----------------2

    个人电脑搭建ftp 从上一次搭建好的局域网继续完成我的后续. 打开windows10 控制面板 点击启用或关闭windows功能 找到Internet Information Services,开启所 ...

  9. 使用树莓派搭建LoRaWAN网关并接入腾讯云物联网开发平台

    安装树莓派环境 制作镜像 下载img文件烧录器 传送门:img文件烧录器地址,下载完成之后双击安装 下载镜像文件 传送门:树莓派系统镜像 推荐下载这个版本的img,因为有桌面,并且大小适中. 下载完之 ...

  10. Android 本地缓存Acache的简单使用

    设置缓存数据: ACache mCache = ACache.get(this); mCache.put("key1", "value"); //保存6秒,如果 ...