只要在每个页面加入这段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. async和await的使用总结 ~ 竟然一直用错了c#中的async和await的使用。。

    对于c#中的async和await的使用,没想到我一直竟然都有一个错误.. ..还是总结太少,这里记录下. 这里以做早餐为例 流程如下: 倒一杯咖啡. 加热平底锅,然后煎两个鸡蛋. 煎三片培根. 烤两 ...

  2. GLIBC_2.18 not found 之类的问题解决办法

    先到 /usr/lib64 下 ll libstdc++* 会发现 libstdc++.so.6 指向了一个新的.比如我这里之前指向6.0.22这个版本,报错 此时只要重新建立软连接 将软连接指向旧的 ...

  3. javascript Math对象 、Date对象笔记

    Math对象     Math 是一个内置对象, 它具有数学常数和函数的属性和方法.不是一个函数对象.     Math数学对象不是构造函数使用的时候不需要new来调用,可以直接使用里面的属性和方法 ...

  4. Fixing the train-test resolution discrepancy

  5. C#LeetCode刷题之#160-相交链表(Intersection of Two Linked Lists)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3824 访问. 编写一个程序,找到两个单链表相交的起始节点. 例如 ...

  6. 性能分析(5)- 软中断导致 CPU 使用率过高的案例

    性能分析小案例系列,可以通过下面链接查看哦 https://www.cnblogs.com/poloyy/category/1814570.html 前言 软中断基本原理,可参考这篇博客:https: ...

  7. 【建议收藏】swoft的最佳实践

    这是一篇使用 swoft 两个月后的总结文章!,后续会陆续更新的 这是 web-api 开发的总结,如果使用 websocket 等服务的可能不适用,本章节会对一些规范.习惯,或者优化进行一些说明 一 ...

  8. VulnHub靶场学习_HA: Chakravyuh

    HA: Chakravyuh Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-chakravyuh,388/ 背景: Close your eyes a ...

  9. kafka-clients 1.0 内部响应接口文档

    AddOffsetsToTxnResponse version:0 name type defaultValue docString throttle_time_ms INT32 0 Duration ...

  10. OpenCV Error - Core.hpp header must be compiled as C++

    在XCode 里编译OpenCV的时候,经常报如题类似的错误. 简单解决办法: 把 *.m 文件重命名为 *.mm 即可