APP移动端开发html模板 _HTML模板

努力尽今夕，少年犹可夸。这篇文章主要讲述APP移动端开发html模板相关的知识，希望能为你提供帮助。
移动端开发模板：
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="https://www.songbingjia.com/android/${ctx}/css/reset.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/${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模板】