1. 程式人生 > >移動端公共樣式

移動端公共樣式

@charset "utf-8";

/* 禁用iPhone中Safari的字號自動調整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 解決IOS預設滑動很卡的情況 */
  -webkit-overflow-scrolling : touch;
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    width: 100%;
}
/* 禁止縮放表單 */
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)
; }
/* 設定HTML5元素為塊 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } textarea{ outline: none; } /* 圖片自適應 */ img { width: 100%; height: auto; width: auto\9; /* ie8 */ display: block; -ms-interpolation-mode: bicubic;/*為了照顧ie圖片縮放失真*/
}
input,select{ -webkit-appearance: none; appearance: none; } select{ background: #fff; color: #555; /*background-image:url('../img/up.png');*/ background-repeat:no-repeat; background-position: right center; background-size: 0.5rem 100%; /*background: url('../../img/up.png') no-repeat right center;*/ } /* 初始化 */ 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: #fff; } 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: #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; } .w50{ width: 50%; } .w25{ width: 25%; } .w20{ width: 20%; } .w33{ width: 33.333333%; } .fl{ float: left; } .fr{ float: right; } .db{ display: block !important; } .dn{ display: none; } .clear:after{content:".";height:0;overflow:hidden;visibility:hidden;display:block;clear:both;} .cursor{cursor: pointer;} /*元件切換的動畫*/ .fade-enter-active, .fade-leave-active { transition: opacity .5s } /* .fade-leave-active in <2.1.8 */ .fade-enter, .fade-leave-to { opacity: 0 }