移动端开发模板：

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. 标签中的rel属性的含义

    rel与rev属性相同,它们都是属于LinkTypes属性. rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系, rel是relationship(关系)的英文缩写. rev ...

  2. 使用webdriverwait封装查找元素方法

    对于selenium原生的查找元素方法进行封装,在timeout规定时间内循环查找页面上有没有某个元素 这样封装的好处: 1.可以有效提高查找元素的效率,避免元素还没加载完就抛异常 2.相对于time ...

  3. LAMP环境如何配置多个域名访问

    背景: 公司有多个项目想要挂载在一个服务器上,因此需要多个域名来访问不同的网站,其实就是一个阿里云服务器,一个ip对应于多个域名 lamp环境: centos版本:命令查看centos的版本号:rpm ...

  4. iOS开发中多线程基础

    耗时操作演练 代码演练 编写耗时方法 - (void)longOperation { for (int i = 0; i < 10000; ++i) { NSLog(@"%@ %d&q ...

  5. 创建4个线程，两个对j加一，两个对j减一（j两同两内）

    package multithread; public class MyThread { //j变量私有 private int j; //同步的+1方法 private synchronized v ...

  6. Linux中chown和chmod的区别和用法（转）

    chmod修改第一列内容,chown修改第3.4列内容: chown用法: 用来更改某个目录或文件的用户名和用户组. chown 用户名:组名 文件路径(可以是绝对路径也可以是相对路径) 例1:cho ...

  7. 帧动画和骨骼json、极速、二进制对比

    对比总结: 1. 帧动画的效率最高,但是图片超过一定帧数,资源图片非常大.比较适合帧数少,大量动画存在,要求效率高的场合. 骨骼json效率较低,已经不推荐使用. 骨骼极速,不支持网格等. 骨骼二进制 ...

  8. AMD、CMD、CommonJs和 ES6对比

    AMD(异步模块定义)是RequireJS在推广过程中对模块定义的规范化产出. define(['package/lib'], function(lib){ function foo(){ lib.l ...

  9. CodeForces 24A Ring road(dfs)

    A. Ring road time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  10. 报错分析---->jsp自定义标签：Unable to load tag handler class

    Unable to load tag handler class 无法加载标签处理程序类 处理自定义标签的类中如下: 调用自定义标签的jsp中如下: