移动端开发模板：

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. A*寻路算法（曼哈顿距离）

    前一些天,在群有人问到A*算法的问题. 之前我已经有实现过,并将之放到github上(https://github.com/XJM2013/A_Star).有兴趣的能够下载下来看看. 这里上传了一个相 ...

  2. ios 开发证书制作

    1.首先打开Mac中的keychain 选择钥匙串访问-证书助手-创建证书-导出CertificateSigningRequest.CertSigningRequest.CertSigningRequ ...

  3. Spring boot：logback文件配置

    resources文件夹下:新建logback-spring.xml文件. 文件内容like: <?xml version="1.0" encoding="UTF- ...

  4. R中基本命名（未完）

    ls() #查看 rm(list=ls()) #清除内存变量 library() #载入库包 help() #查看帮助文档 head(iris) #查看数据集 class(iris) #查看数据集的类 ...

  5. Hadoop伪分布安装详解(一)

    注:以下截图针对Ubuntu操作系统,对Centos步骤类似.请读者选择不同镜像即可. 第一部分:VMware WorkStation10 安装 1.安装好VMware10虚拟机软件并下载好Ubunt ...

  6. 直接IO 零拷贝 DAM 自缓存应用程序

    直接IO  零拷贝  DAM  自缓存应用程序

  7. http请求及json发送与解析 post string

    golang http请求及json流解析 - 长风v持成的博客 - CSDN博客 https://blog.csdn.net/u011677067/article/details/80852158 ...

  8. Spark源码分析 – BlockManager

    参考, Spark源码分析之-Storage模块 对于storage, 为何Spark需要storage模块?为了cache RDD Spark的特点就是可以将RDD cache在memory或dis ...

  9. Vi 的常用命令

    1. vi 的三种工作模式 命令模式 打开文件首先进入命令模式, 是使用 vi 的入口; 通过命令对文件进行常规的编辑操作, 例如: 定位,翻页,复制,粘贴,删除等; 末行模式 执行保存,退出等操作, ...

  10. 观 浅谈HTTP中Get与Post的区别

    看完解决了一些模糊不清的.错误的理解.