移动端开发模板：

750的稿子除以75：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="renderer" content="webkit">
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta content="yes" name="apple-mobile-web-app-capable">
  9.     <meta content="yes" name="apple-touch-fullscreen">
  10.     <meta content="telephone=no,email=no" name="format-detection">
  11.     <link rel="stylesheet" href="${ctx}/css/reset.css">
  12.     <link rel="stylesheet" href="${ctx}/css/haveResult.css">
  13.     <title>搜索有结果页</title>
  14.     <script type="text/javascript">
  15.         document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 10) > 75 ? 40 + "px" : window.innerWidth / 10 + "px";
  16.     </script>
  17. </head>
  18. <body id="container">
  19. </body>
  20. </html>

　　

初始化样式：

  1. @charset "utf-8";
  2.  
  3. /* 禁用iPhone中Safari的字号自动调整 */
  4. html {
  5.     -webkit-text-size-adjust: 100%;
  6.     -ms-text-size-adjust: 100%;
  7.     /* 解决IOS默认滑动很卡的情况 */
  8.     -webkit-overflow-scrolling : touch;
  9. }
  10.  
  11. /* 禁止缩放表单 */
  12. input[type="submit"], input[type="reset"], input[type="button"], input {
  13.     resize: none;
  14.     border: none;
  15. }
  16.  
  17. /* 取消链接高亮  */
  18. body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  19.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20.     border: none;
  21.     outline: none;
  22.     font-weight: normal;
  23. }
  24.  
  25. /* 设置HTML5元素为块 */
  26. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  27.     display: block;
  28. }
  29.  
  30. /* 图片自适应 */
  31. img {
  32.     width: 100%;
  33.     height: auto;
  34.     width: auto\9; /* ie8 */
  35.     /*display: block;*/
  36.     -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
  37. }
  38.  
  39. /* 初始化 */
  40. body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  41.     margin: 0;
  42.     padding: 0;
  43. }
  44. body {
  45.     font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
  46.     color: #555;
  47.     /*background-color: #F7F7F7;*/
  48. }
  49. button{
  50.     border: none;
  51.     outline: none;
  52.     border-radius: 6px;
  53. }
  54. em, i {
  55.     font-style: normal;
  56. }
  57. ul,li{
  58.     list-style-type: none;
  59. }
  60. strong {
  61.     font-weight: normal;
  62. }
  63. .clearfix:after {
  64.     content: "";
  65.     display: block;
  66.     visibility: hidden;
  67.     height: 0;
  68.     clear: both;
  69. }
  70. .clearfix {
  71.     zoom: 1;
  72. }
  73. a {
  74.     text-decoration: none;
  75.     color: #000;/*#969696;*/
  76.     font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
  77. }
  78. a:hover {
  79.     text-decoration: none;
  80. }
  81. ul, ol {
  82.     list-style: none;
  83. }
  84. h1, h2, h3, h4, h5, h6 {
  85.     font-size: 100%;
  86.     font-family: 'Microsoft YaHei';
  87. }
  88. img {
  89.     border: none;
  90. }
  91. input{
  92.     font-family: 'Microsoft YaHei';
  93. }
  94. /*单行溢出*/
  95. .one-txt-cut{
  96.     overflow: hidden;
  97.     white-space: nowrap;
  98.     text-overflow: ellipsis;
  99. }
  100. /*多行溢出 手机端使用*/
  101. .txt-cut{
  102.     overflow : hidden;
  103.     text-overflow: ellipsis;
  104.     display: -webkit-box;
  105.     /* -webkit-line-clamp: 2; */
  106.     -webkit-box-orient: vertical;
  107. }
  108. /* 移动端点击a链接出现蓝色背景问题解决 */
  109. a:link,a:active,a:visited,a:hover {
  110.     background: none;
  111.     -webkit-tap-highlight-color: rgba(0,0,0,0);
  112.     -webkit-tap-highlight-color: transparent;
  113. }
  114. table {
  115. 	border-spacing: 0;
  116. 	border-collapse: collapse;
  117. 	text-align: center;
  118. }
  119. .splitWordOneRow{
  120.   overflow: hidden;
  121.   text-overflow:ellipsis;
  122.   white-space: nowrap;
  123. }
  124. .splitWord{
  125.   display: -webkit-box;
  126.   -webkit-box-orient: vertical;
  127.   -webkit-line-clamp: 2;
  128.   overflow: hidden;
  129.   text-overflow:ellipsis;
  130. }

　　稿子除以40的方法：

  1.     <script type="text/javascript">
  2.         (function(doc, win) {
  3.             var docEl = doc.documentElement;
  4.             var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  5.             var recalc = function() {
  6.                 var clientWidth = docEl.clientWidth;
  7.                 if (!clientWidth) {
  8.                     return;
  9.                 }
  10.                 docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
  11.             };
  12.             if (!doc.addEventListener) return;
  13.             win.addEventListener(resizeEvt, recalc, false);
  14.             doc.addEventListener('DOMContentLoaded', recalc, false);
  15.         })(document, window);
  16.     </script>

　　

APP移动端开发html模板的更多相关文章

  1. APP服务端开发遇到的问题总结（后续再整理解决方法）

    IOS  AES对称加密,加密结果不同,问题解决 IOS http post请求,使用AFNetworing 框架,默认请求content-type为application/json ,所以无法使用@ ...

  2. 利用vue-cli + vant搭建一个移动端开发模板

    本文系原创,转载请附带作者信息.项目地址: https://github.com/momozjm/vant-project.git 前言 在项目开发过程中,一个新的项目需要我们从零开始搭建框架,这个时 ...

  3. 移动App服务端架构设计

      我从事手机app服务端开发现在已经是3个年头,自己也整理出了一套相对好用的服务架构,写出来,跟大家一起分享.如有不足,还请多指教. 一:基础流程图. 其实有一点还需要加上,就是对json的压缩和加 ...

  4. 微信支付（APP支付）-服务端开发（一）

    微信支付,首先需要注册一个商户平台公众账号,(网址:https://pay.weixin.qq.com/index.php/home/d_login) 目前微信支付的接入方式有四种方式:公众号支付,A ...

  5. 移动端App uni-app + mui 开发记录

    前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原 ...

  6. 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点

    此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...

  7. zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

    ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...

  8. 简单5步说清App软件在线开发、App制作多少钱？

    开发制作一款App,所有人都会首先关心开发一款App多少钱这个问题.从网上的信息来看,花费个几十万是很正常的事情,甚至有人说要花上百万才能制作出一款App.那么App软件的开发制作到底和什么有关?怎么 ...

  9. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

随机推荐

  1. 选择LoadRunner Protocol的两大定律

    选择LoadRunner Protocol的两大定律 确定性能测试脚本录制时使用的协议类型经常是一个容易引起误会的问题.很多刚刚接触到性能测试的同行常常会想当然地根据开发语言等来决定协议的选取,导致录 ...

  2. LoadRunner检查点实战之运行查看器

    一.为什么要使用检查点 为什么要使用检查点,那就要说明一下LR如何判断脚本是否执行成功.LR判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的HTTP状态为 200 OK ,那么Vu ...

  3. expected_conditions判断页面元素

    expected_condtions提供了16种判断页面元素的方法: 1.title_is:判断当前页面的title是否完全等于预期字符串,返回布尔值 2.title_contains:判断当前页面的 ...

  4. Python+PyQt5：停靠组件QDockWidget的实现

    QMainWindow主窗体中放置停靠组件QDockWidget的实现流程: 第一步:创建QMainWindow窗体,这是承载QDockWidget的主体 第二步:创建QDockWidget组件实例, ...

  5. ios开发之--键盘的监听

    监听键盘的弹出,让整个页面向上移动,比较简单,仅做记录使用: 代码如下: // 监听键盘 [[NSNotificationCenter defaultCenter] addObserver:self ...

  6. iOS开发之--实现倒计时显示时分秒

    这段时间写公司的一个外包项目,需要用到倒计时:需要显示时分秒,通过在网上搜集资料,找到了2中方法,我把这两种方法结合起来,可以很好的满足这个需求: 1.创建一个类继承自UIlabel,用来展示时分秒的 ...

  7. Spring学习笔记 7.1 Spring MVC起步

    7.1.1 跟踪Spring MVC的请求请求首先到达DispatcherServlet(DispatcherServlet是Spring MVC中的前端控制器):DispatcherServlet的 ...

  8. phpcms v9表单实现问答咨询功能

    本文转自别人 phpcms v9的留言板插件可以安装留言板,做问答咨询,那样的话有很多东西需要修改,也有人发现phpcms v9有个表单向导功能,只能留言,不能回复,今天仿站网:新源网络工作室告诉大家 ...

  9. 【集中工作薄】 当前文件夹中所有Excel文件中 多个工作簿的第一个工作表 复制到工作簿中

    功能:当前文件夹中所有Excel文件中 多个工作簿的第一个工作表 复制到工作簿中 Sub Books2Sheets() '定义对话框变量 Dim fd As FileDialog Set fd = A ...

  10. $(document).scrollTop()与$(window).scrollTop()

    $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 ...