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. [PE格式分析] 2.IMAGE_DOS_HEADER

    typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // Magic number 固定为"MZ" ...

  2. lua 中的上n级模块路径函数分享

    --- 得到 lua 模块路径的上 n 级,返回的的字符串结尾有个 "." 字符 -- @usage getUpFloder("math.base.core", ...

  3. CentOS 附加软件包

    本人初学 CentOS,安装软件与 windows 下区别很大,大部分得通过 yum install xxx .这有个问题,一方面 yum 资源有限,另一方面 yum 默认装的版本较低.比如 Cent ...

  4. Linux ->> scp命令复制对端机器上的文件/文件夹

    scp是secure copy的简写,用于在Linux下从远程机器拷贝文件. 特点: 传输是加密的,稍微影响了一下速度.而相比较rsync,它对于资源的占用还是有优势的. 用法 scp [参数] [原 ...

  5. 学会利用Ionic官网文档

    和任何新技术一样,ionic也提供了详细的官方文档说明.网址如下: http://ionicframework.com/docs/ 学会使用ionic控件 ionic提供了大量优秀的高性能的仿原生控件 ...

  6. 教你如何封装异步网络连接NSURLConnection实现带有百分比的下载

    教你如何封装异步网络连接NSURLConnection实现带有百分比的下载 注:本教程需要你对block有着较为深刻的理解,且对如何封装对象有着一些经验. 也许你已经用惯了AFNetworking2. ...

  7. Grunt 使用（二）uglify插件压缩javascript代码

    本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...

  8. 《SQL必知必会》总结

    目录   第1章 了解SQL 第2章 检索数据 第3章 排序检索数据 第4章 过滤数据 第5章 高级数据过滤 第6章 用通配符进行过滤 第7章 创建计算字段 第8章 使用数据处理函数 第9章 汇总数据 ...

  9. codeforces Flipping Game 题解

    版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/.未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...

  10. Axure RP 8 学习记录

    一.Axure RP 简介 Axure是一个专业的快速原型设计工具.能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档. 二.Axure RP下载 1.下载安装包 https://w ...