移动端开发模板：

750的稿子除以75：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="renderer" content="webkit">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="yes" name="apple-touch-fullscreen">

    <meta content="telephone=no,email=no" name="format-detection">

    <link rel="stylesheet" href="${ctx}/css/reset.css">

    <link rel="stylesheet" href="${ctx}/css/haveResult.css">

    <title>搜索有结果页</title>

    <script type="text/javascript">

        document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 10) > 75 ? 40 + "px" : window.innerWidth / 10 + "px";

    </script>

</head>

<body id="container">

</body>

</html>

　　

初始化样式：

@charset "utf-8";

/* 禁用iPhone中Safari的字号自动调整 */

html {

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    /* 解决IOS默认滑动很卡的情况 */

    -webkit-overflow-scrolling : touch;

}

/* 禁止缩放表单 */

input[type="submit"], input[type="reset"], input[type="button"], input {

    resize: none;

    border: none;

}

/* 取消链接高亮  */

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 {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    border: none;

    outline: none;

    font-weight: normal;

}

/* 设置HTML5元素为块 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block;

}

/* 图片自适应 */

img {

    width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

    /*display: block;*/

    -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/

}

/* 初始化 */

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 {

    margin: 0;

    padding: 0;

}

body {

    font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;

    color: #555;

    /*background-color: #F7F7F7;*/

}

button{

    border: none;

    outline: none;

    border-radius: 6px;

}

em, i {

    font-style: normal;

}

ul,li{

    list-style-type: none;

}

strong {

    font-weight: normal;

}

.clearfix:after {

    content: "";

    display: block;

    visibility: hidden;

    height: 0;

    clear: both;

}

.clearfix {

    zoom: 1;

}

a {

    text-decoration: none;

    color: #000;/*#969696;*/

    font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;

}

a:hover {

    text-decoration: none;

}

ul, ol {

    list-style: none;

}

h1, h2, h3, h4, h5, h6 {

    font-size: 100%;

    font-family: 'Microsoft YaHei';

}

img {

    border: none;

}

input{

    font-family: 'Microsoft YaHei';

}

/*单行溢出*/

.one-txt-cut{

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

/*多行溢出 手机端使用*/

.txt-cut{

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    /* -webkit-line-clamp: 2; */

    -webkit-box-orient: vertical;

}

/* 移动端点击a链接出现蓝色背景问题解决 */

a:link,a:active,a:visited,a:hover {

    background: none;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-tap-highlight-color: transparent;

}

table {

	border-spacing: 0;

	border-collapse: collapse;

	text-align: center;

}

.splitWordOneRow{

  overflow: hidden;

  text-overflow:ellipsis;

  white-space: nowrap;

}

.splitWord{

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  text-overflow:ellipsis;

}

　　稿子除以40的方法：

    <script type="text/javascript">

        (function(doc, win) {

            var docEl = doc.documentElement;

            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

            var recalc = function() {

                var clientWidth = docEl.clientWidth;

                if (!clientWidth) {

                    return;

                }

                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';

            };

            if (!doc.addEventListener) return;

            win.addEventListener(resizeEvt, recalc, false);

            doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);

    </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. 实例讲解JQuery中this和$(this)区别

    这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个j ...

  2. hdu 3667（拆边+最小费用最大流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3667 思路:由于花费的计算方法是a*x*x,因此必须拆边,使得最小费用流模板可用,即变成a*x的形式. ...

  3. windows性能监视器的使用

    https://blog.csdn.net/ab7434588/article/details/53023799 一般在客户端通过LoadRunner对服务器进行压力测试,都需要实时监控服务器端的系统 ...

  4. ArcGIS ArcMap 问题（ArcMap闪退、cx_oracle安装不上）

    一.问题描述 1.ArcMap闪退 2.安装32位cx_oracle提示python目录不存在 二.解决方案 1.修改pythoncore的文件目录,指向C:\Python27\ArcGIS10.3\ ...

  5. 1-2、superset国际化

    最近由于工作需要研究开源可视化项目superset,由于其国际化做不怎么好,故而记录下国际化的过程,本篇本着『授人以鱼不如授人以渔』的原则,只叙述国际化的过程及方法,不提供直接的国际化文件. 为了方便 ...

  6. jquery中return false的作用

    jquery中的return false既阻止默认事件,又阻止冒泡: 在原生的js中,return false只有一个功能,那就是阻止默认事件. <!DOCTYPE html> <h ...

  7. Chrome浏览器断点调试无效的问题

    问题是这样的,在使用chrome浏览器调试JavaScript的时候,突然设置的断点失效了,怎么弄都没有效果. 折腾了半天,尝试了各种方法就是没有用. 解决:重启一下chrome浏览器就好了,这似乎是 ...

  8. 160615、Spring3 MVC 拦截器拦截不到的问题

    昨天项目组有个成员使用拦截器的时候发现不起作用,后来发现了原因,在这里跟大家分享一下(主要是冲突了).分享的是一位网友写的文章,他总结的很好. com.zk.interceptors.MyInterc ...

  9. C#、devExpress 的 给bandedGrid加菜单功能 ：复制、粘贴的例子（转）

    C#.devExpress 的 给bandedGrid加菜单功能 :复制.粘贴的例子 CopyFromGrid PasteToGrid PasteNewRowsToGrid private void ...

  10. 【react 样式】给react组件指定style

    1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...