移动端开发模板：

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. 如何用ChemDraw绘制化学课件

    近年来随着ChemDraw等多媒体技术的迅速发展,多媒体技术越来越多的应用在教学中.学会应用ChemDraw绘制化学分子结构.化学反应式和实验装置的方法,将在有机化学的教学中提供一定的帮助,进一步提高 ...

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

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

  3. Angular2 Observable 可观察对象

    可观察对象支持在应用中的发布者和订阅者之间传递消息.在需要进行事件处理,异步编程和处理多值的时候,可观察对象相对其他技术有显著的优点. 可观察对象是声明式的 —— 也就是说,虽然你定义了一个用于发布值 ...

  4. 收集各种在线HTTP网站载入速度（响应时间）站长测试（检测）工具

    收集各种在线HTTP网站载入速度(响应时间)站长测试(检测)工具 名称\详情 简单功能描述 推荐星级 演示/示例 监控宝 从中国多地对你提交的URL进行载入速度(响应时间)测试 ★★★★★   17C ...

  5. 三 Android Studio打包EgretApp (SDK选择和下载)

    一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...

  6. 【BZOJ2827】千山鸟飞绝 hash+堆+SBT

    [BZOJ2827]千山鸟飞绝 Description 话说有一天doyouloveme和vfleaking到山里玩.谁知doyouloveme刚刚进山,所有的鸟儿竟被他的神犇气场给惊得全部飞走了.v ...

  7. java中Object转换成int或String类型方法

    转载: http://www.cnblogs.com/1020182600HENG/p/6137206.html Object obj = getObject(); if(obj instanceof ...

  8. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. 【Python算法】哈希存储、哈希表、散列表原理

    哈希表的定义: 哈希存储的基本思想是以关键字Key为自变量,通过一定的函数关系(散列函数或哈希函数),计算出对应的函数值(哈希地址),以这个值作为数据元素的地址,并将数据元素存入到相应地址的存储单元中 ...

  10. 网络编程 - 1.简单的套接字通信/2.加上通信循环/3.bug修复/4.加上链接循环/5.模拟ssh远程执行命令

    1.简单的套接字通信 服务端 ''' 服务端 接电话 客户端 打电话 1.先启动服务端 2.服务端有两种套接字 1.phone 用来干接收链接的 2.conn 用来干收发消息的 ''' import ...