移动端REM响应式模板及相应规范
来源:互联网 发布:linux设置待机时间 编辑:程序博客网 时间:2024/05/29 07:29
M端模板
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>网站标题,控制在25个字、50个字节以内</title> <meta name="keywords" content="关键词,5个左右,单个8汉字以内"> <meta name="description" content="网站描述,字数尽量空制在80个汉字,160个字符以内!"> <link rel="stylesheet" href="css/reset.css"> <link type="text/css" rel="stylesheet" media="screen" href="css/index.css"> <script src="js/common.js" charset="utf-8"></script></head><body> <header>网站头部</header> <div>内容部分</div> <footer>页脚</footer> <script type="text/javascript" src="lib/zepto.min.js"></script> <script src="js/index.js"></script></body></html> 所有的PC页面都必须严格依照以上模板 所用到的公用的库、组件没有特殊情况以DEMO里的相应版本,保持版本一致性
关于M端需要注意的是我们采用rem动态布局,模板中lib/common.js就是动态的实现原理同时我们需要根据设计图来做相应的参数修改,代码中第7行中的750是默认设计图的宽度,后续只需修改此处即可。规则,1rem = 100px,即某一元素的宽或高是100px,用本模板则只需写1rem,这样即可做到动态布局!
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; docEl.getElementsByTagName("body")[0].style.fontSize = docEl.style.fontSize; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
附git地址:http://git.kaikeba.cn/HK-FE/fe-writing-rules
1 0
- 移动端REM响应式模板及相应规范
- 移动端响应式rem用法
- 【移动端】使用REM进行的响应式布局
- 移动端响应rem dpr viewport设置
- 移动端rem及em
- 移动端响应式开发rem字体与页面百分比设置
- 移动wapapp 用rem来做响应式开发
- 移动WEB开发---用rem开发响应式设计
- 浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
- 浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
- 手机端响应式解决方案-rem布局
- rem 响应式布局
- 响应式rem介绍
- 移动端基础及响应式布局
- 手机app响应式开发rem的使用及配置
- 移动端rem文字自适式
- 移动端自适应rem
- 移动端rem布局
- Apache Benchmark安装、参数含义&使用总结、结果分析
- Android中Action、Category、Data匹配规则
- ruby on rails 减少查询次数
- Intellig idea jdk明明是1.8了,还是 出现Diamond types are not supported at this language level
- JS原型设计模式(四)之缺陷(一)
- 移动端REM响应式模板及相应规范
- CSS样式中的 nav ul li ul 与 nav>ul>li
- 关于hadoop组件的端口的用处
- Android 炫酷的loading
- KMP问题详解
- java校验正则表达式
- Oracle 建立索引及利用索引的SQL语句优化
- Yii2 事务处理
- hdu 3507 Print Article