html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="pragma" content="no-cache" />
<meta name="format-detection" content="telephone=no" /> <!-- 忽略页面中的数字识别为电话号码 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- winphone去掉点击效果 -->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/conmon.js"></script>
<title>首页</title>
</head>
<body>
<img id="index-bg" src="img/index.png"/>
<header>头 </header>
         <section>

　　　　//内容区域
         </section>

<footer>脚 </footer>
</body>
</html>

css

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
font-family: 'Microsoft Yahei','SimSun','Helvetica';
word-break:break-all;
font-size: 0.32rem;
width: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}

img{
border:0;
display:block;
}
li{
list-style:none
}
a {
text-decoration:none;
color:#000;
}
a:active{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input,button{
outline: none;
}

js

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

移动端网站通用模板 单位rem的更多相关文章

  1. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  2. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  3. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  4. 一些网站后台模板源码分析 Particleground.js 验证码

    转: https://blog.csdn.net/bcbobo21cn/article/details/51271750 1 灰色简洁企业后台管理模板 效果: 看下项目结构: 它使用了moderniz ...

  5. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  6. 单位rem 触屏适配总结

    总结过的:定宽320 缩放适配手机屏幕 参考文章:web app变革之rem 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root elem ...

  7. 解决：SharePoint当中的STP网站列表模板没有办法导出到其它语言环境中使用

    首在在你的英文版本上,导出列表或是网站的模板,这个文件可能是这样滴:template.stp 把这个文件 template.stp 命名为 template.cab 解压 这个 *.cab 文件 在解 ...

  8. 移动端网站优化指南-WAP篇

    转载:http://seofangfa.com/mobile-seo/mobile-seo-guide.html 1.域名优化:启用短域名,例如:m.abc.com,便于用户记忆,方便搜索蜘蛛查找,减 ...

  9. Sharepoint2013 中想要将网站另存为模板步骤

    Sharepoint2013 中想要将网站另存为模板步骤 第一步:使用SPD打开想要另存为模板的网站,找到网站选项: 第二步:点击打开网站选项,找到一个SaveSiteAsTemplateEnable ...

随机推荐

  1. 【Python之搜索引擎】（一）概述

    learning goal--search engine 1.Find datas - crawl 2.Index 3.page rank String操作 提取网络中的链接 Extracting a ...

  2. 网站的Information Architecture--构建一个最优用户体验的site structure

    http://conversionxl.com/website-information-architecture-optimal-user-experience/ 在网站上应该有什么类型的conten ...

  3. mongodb使用mongos链接复制集

    我们知道mongodb现在生产环境大部分还是使用的复制集来作为主流,据我了解.很多公司现在都是使用复制集的方式,而我们通过mongos可以巧妙的解决链接的问题,我们先从环境说起: 首先我们要模仿搭建的 ...

  4. 【Leetcode】【Medium】Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  5. 关于thrift的一些探索——thrift序列化技术

    thrift的IDL,相当于一个钥匙.而thrift传输过程,相当于从两个房间之间的传输数据. 图-1 (因为Thrift采用了C/S模型,不支持双向通信:client只能远程调用server端的RP ...

  6. Hadoop学习---Hadoop的MapReduce的原理

    MapReduce的原理 MapReduce的原理 NameNode:存放文件的元数据信息 DataNode:存放文件的具体内容 ResourceManager:资源管理,管理内存.CPU等 Node ...

  7. 在ubuntu16.04上安装eclipse

     在ubuntu16.04上安装eclipse 一.下载     首先我们需要安装jdk1.8及其以上,然后从官网:https://www.eclipse.org/downloads/上下载,需要注意 ...

  8. 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.3.函数调用与执行

    这章原名叫“虚拟机字节码执行引擎”,实际就是讲的函数如何调用和执行的. 1.概述 “虚拟机”是一个相对于“物理机”的概念,这两种机器都有代码执行能力, 其区别是物理机的执行引擎是直接建立在处理器. 硬 ...

  9. ZT 为什么pthread_cond_t要和pthread_mutex_t同时使用 || pthread/Linux多线程编程

    为什么线程同步的时候pthread_cond_t要和pthread_mutex_t同时使用 (2009-10-27 11:07:23) 转载▼ 标签: 杂谈 分类: 计算机 举一个例子(http:// ...

  10. Entity FrameWork Code First 配置关系

    Has方法与With方法 A.HasRequired(a => a.B).WithOptional(b => b.A);上面一句配置意思就是A类包含B类一个不为null的实例,B类包含A类 ...