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. linux中进入mysql时报错Access denied for user 'root'@'localhost' (using password: YES)解决方案

    之前在linux中装完mysql后直接在命令行窗口输入mysql就会进入数据库了,但是今天输入mysql命令后直接报错,如下图: 之后输入:mysql -uroot -p 提示输入密码:***** 还 ...

  2. CMake是用于生成make文件的跨平台编译文件

    参考: https://www.cnblogs.com/hbccdf/p/introduction_of_cmake.html https://elloop.github.io/tools/2016- ...

  3. 【转载】Kali-linux安装之后的简单设置

         1.更新软件源:修改sources.list文件:leafpad /etc/apt/sources.list然后选择添加以下适合自己较快的源(可自由选择,不一定要全部): #官方源deb h ...

  4. su

    参数选项:-,-l,--login 切换用户的同时,将用户的家目录.系统环境变量等重新按切换后的用户初始化.-c 向shell传递单个命令,仅希望在某个用户下执行命令,而不用直接切换到该用户下来操作. ...

  5. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

  6. The Binder Architecture

    The Binder Architecture is a declarative architecture for iOS development inspired by MVVM and VIPER ...

  7. CTSC2018 && APIO2018 && SDOI2018R2游记

    Day -? 占个坑先.希望CTSC,APIO别打铁,R2别滚粗QAQ CTSC Day 0 早起坐车睡觉颓废报道颓废 反正游记就是咕懒得写了 Day 1 早上四点被xp的闹钟吵醒(???还两次) 幸 ...

  8. v-bind:的基本用法

    1. v-bind:class(根据需求进行选择) <style> .box{ background-color: #ff0; } .textColor{ color: #000; } . ...

  9. 开源项目之kisso

    kisso开源项目:https://gitee.com/baomidou/kisso 一.简介 kisso  =  cookie sso 基于 Cookie 的 SSO 中间件,它是一把快速开发 ja ...

  10. Andorid进阶7—— Ant自动编译打包&发布 android项目

    http://www.cnblogs.com/tt_mc/p/3891546.html Eclipse用起来虽然方便,但是编译打包android项目还是比较慢,尤其将应用打包发布到各个渠道时,用Ecl ...