h5整体页面布局
只要在每个页面加入这段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整体页面布局的更多相关文章
- h5单页面布局
前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局,代码很 ...
- app开发,H5+CSS3页面布局小tips
1.inline-block使用后带来的间隔影响 2.竖线的处理 3.ssh公匙 4.星星组件的巧妙用法 5.api.js的$api对象与 安卓原生引擎的api对象,均相当于jQuery的$对象 6. ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
- 关于html页面布局
之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高 当div不设计长宽高而是自动由内部控件”撑“ ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- Bootstrap入门二:响应式页面布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
随机推荐
- C 语言学习 --2
memset Declaration: void *memset(void *str, int c, size_t n); Copies the character c (an unsigned ch ...
- ios数组基本用法和排序大全
1.创建数组 // 创建一个空的数组 NSArray *array = [NSArray array]; // 创建有1个元素的数组 array = [NSArray arrayWithObject: ...
- 网络安全传输系统-sprint2线程池技术优化
part1:线程池工作原理 为满足多客户端可同时登陆的要求,服务器端必须实现并发工作方式.当服务器主进程持续等待客户端连接时,每连接上一个客户端都需一个单独的进程或线程处理客户端的任务.但考虑到多进程 ...
- 解决Exception in thread "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no jogl in java.library.path问题
首先要把jonl.jar和gluegen.jar导入到eclipse中,然后把解压后的4个.dll文件也导入到eclipse中 具体操作: jonl文件下载地址 链接:https://pan.baid ...
- 007_go语言中的switch语句
代码演示 package main import "fmt" import "time" func main() { i := 2 fmt.Print(&quo ...
- CSS网页排版
自印刷出版物诞生以来,排版就一直是平面设计的基础. 同样,排版在网页设计中也扮演着重要角色. 1.CSS的基本排版技术 1.1 文本颜色 对应网页而言,文本颜色也许是最基本的样式之一. 默认情况下,浏 ...
- jQuery 购物车案例
h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...
- java List接口二
一 ArrayList集合 ArrayList集合数据存储的结构是数组结构.元素增删慢,查找快,由于日常开发中使用最多的 功能为查询数据.遍历数据,所以ArrayList是最常用的集合. 许多程序员开 ...
- 为什么我们需要Q#?
原文地址:https://blogs.msdn.microsoft.com/visualstudio/2018/11/15/why-do-we-need-q/ 本文章为机器翻译. 你可能熟悉微软量子的 ...
- github渗透测试工具库
本文作者:Yunying 原文链接:https://www.cnblogs.com/BOHB-yunying/p/11856178.html 导航: 2.漏洞练习平台 WebGoat漏洞练习平台: h ...