標籤：lap BMI webkit after 圖片縮放 滑動 rom color com
移動端開發模板：
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模板
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
