mobile移动网页开发常用代码模板
2016-02-02 23:52
666 查看
index.html
<!DOCTYPE HTML> <html> <head> <!--申明当前页面的编码集--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--网页标题--> <title>HTML5移动端开发模板</title> <!--网页关键词--> <meta name="keywords" content="" /> <!--网页描述--> <meta name="description" content="" /> <!--适配当前屏幕--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!--禁止自动识别电话号码--> <meta name="format-detection" content="telephone=no" /> <!--禁止自动识别邮箱--> <meta content="email=no" name="format-detection" /> <!--iphone中safari私有meta标签, 允许全屏模式浏览,隐藏浏览器导航栏--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--iphone中safari顶端的状态条的样式black(黑色)--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style type="text/css"> /*reset 重置*/ body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea, td,th,button,strong,em,select,video,canvas{margin:0;padding:0;} li{list-style:none;vertical-align:top;} table{ border-collapse:collapse;} textarea{resize:none;overflow:auto;} img{ border:none; vertical-align:middle;} em{ font-style:normal;} a{ text-decoration:none;} a,input{ -webkit-appearance: none;/*屏蔽阴影*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*ios android去除自带阴影的样式*/ } a, img { /* 禁止长按链接与图片弹出菜单 */ -webkit-touch-callout: none; } html, body { /* 禁止选中文本(如无文本选中需求,此为必选项) */ -webkit-user-select: none; user-select: none; } /*public*/ html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } } body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; overflow-x:hidden; overflow-y:auto; font-size:0.7rem; } .clear{zoom:1;} .clear:after{content:''; display:block; clear:both;} .fl{float:left;} .fr{float:right;} .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;} </style> </head> <body> <div> <div>移动端开发模板</div> </div> </body> </html>
相关文章推荐
- Java学习——Servlet跳转的配置
- JavaEE 7中的EJB
- 个人笔记 asp 09 asp字符串转换
- golang rbac框架
- 关于白噪声的理解
- 个人笔记 asp 08 asp设置保留小数点后两位
- 个人笔记 asp 07 替换函数
- 算法竞赛入门经典,练习代码 ,4.4.1 小问题集锦
- Java内部类与异常类
- 个人笔记 asp 06 asp重定向页面
- 个人笔记 asp 05 asp清除session
- Python 第十三章 图形界面
- 1047. 编程团体赛(20)
- Java学习笔记2-异常处理
- Python字符串格式化
- python小白-day5 模块
- JDBC之简单事务处理
- 03-mac环境java SE搭建记录
- java中线程与进程的一些总结
- PHP __autoload与spl_autoload