移动端开发模板：

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. Mac 安装Jupyter notebook

    python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setupt ...

  2. UIViewController三种不同的初始化view的方式

    You can specify the views for a view controller using a Storyboard created in Interface Builder. A s ...

  3. localStorage变更事件当前页响应新解-awen

    html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听storage变更事件你就会发现,当数据发生变化时本页是监听不到stora ...

  4. 配置使用TargetFrameworks输出多版本类库

    1.类库右键 2.修改配置 修改前: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <Targe ...

  5. 编程之美 set 1 不要被阶乘吓倒

    总结 1. 使用加法解决指数问题时, 可用背包问题的变形 2. 题目用到的公式和求解 1~N 中 1 出现的次数的公式类似 题目 1. 给定一个整数 N, 那么 N 的阶乘 N! 末尾有多少个 0 呢 ...

  6. WebService远程调用(命令行调用)

    远程调用webservice 方法, 通过wsdl命令,生成webservice 对应asmx 文件的对应类(cs文件),然后将此cs文件引用到当前项目中,项目其他地方需要调用webservice方法 ...

  7. 应用开发之WinForm开发

    本章简言 上一章笔者介绍了关于WinForm环境.这一章笔者将继续讲WinForm.只不过更加的面向开发了.事实就是在学习工具箱里面的控件.对于WinForm开发来讲,企业对他的要求并没有那么高.但是 ...

  8. 【BZOJ4517】[Sdoi2016]排列计数 组合数+错排

    [BZOJ4517][Sdoi2016]排列计数 Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值 ...

  9. 探讨Java I/O类和接口

    (输出)Output:程序---->数据源(如某个文件) (输入)Input:数据源---->程序 Java.io定义的I/O类如下表所示: BufferedInputStream Buf ...

  10. poj3666 Making the grade【线性dp】

    Making the Grade Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:10187   Accepted: 4724 ...