移動端css公共樣式
@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); } /* 設定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; } 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; }
轉自:https://www.cnblogs.com/handsome-jm/p/7297719.html
相關推薦
移動端css公共樣式
@charset "utf-8"; /* 禁用iPhone中Safari的字號自動調整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解決IOS預設
移動端css樣式設定
1、移動端字型定義 body{font-family: Helvetica;} 說明:在pc端,我們通常都會使用“微軟雅黑”字型。但在移動端,ios、 android、winphone三大系統都沒有“微軟雅黑”字型。各手機系統都有自己的預設中文字型,且肉眼很難看出區別。所以
移動端css樣式初始化
@charset "utf-8"; /* 禁用iPhone中Safari的字號自動調整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解決IOS預設滑
css公共樣式整理
one pan small fig parent fieldset block web kit 第一種PC端公共樣式: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, bl
css公共樣式 | 標簽元素初始化
騰訊 bili tail 1.0 keywords form oot ctype light PC參考樣式1: @charset "utf-8"; html{background:#fff;overflow:auto;} body{min-width:1200px;fon
移動端----CSS基礎設置
:focus utf script utf-8 all font web title out <html> <head> <meta charset="utf-8"> <title>移動端----CSS基礎
CSS公共樣式
*{ margin: 0; padding: 0; } ul,li,ol{ list-style: none; } a{ text-decoration: none; } img{ border: 0; } body{ font-size: 12px; font
移動端CSS初始化reset.css
html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-s
關於移動端css用rem單位的情況
寫移動端的頁面有一些了 試用過的方法大概總結一下: 1、字號單位px,寬度寫百分數,高度寫定值px 2、在css中用@media寫媒體查詢,以iphone6 為分界,字號單位用rem,寬度寫百分數,高度儘量用padding,不要給定值(防止使用者在瀏覽器中自動調節字號大小,
css公共樣式及清除浮動
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0;}*
h5移動端常見title樣式
<template> <div> <header> <div class="h-item"> <i class="iconfont icon
移動端頁面預設樣式重置
1、-webkit-tap-highlight-color (這個屬性只用於IOS(iphone和ipad)) 當你點選一個連結或者通過js定義的可點選的元素時,它會出現一個半透明的灰色背景,要重置這個表現,可以通過設定-webkit-tap-highlight-color為任何顏色。 eg、設定
前端css公共樣式
* -- 樣式說明 -- * 最大優先實現法,全域性能實現不用區域,區域能實現不用模板, * 模板能實現不用介面,介面能實現不用標籤 * g - 全域性 * t - 區域 * m - 模板 * ui - 介面 * lb - 標籤 * 特殊標籤 * j -
移動端開發常規CSS樣式總結
使用到的HTML頁面標籤:Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ;詳細說明我就不說了,只給新手說下,為什麼W3C那麼多標籤,只使用16個就可以把整個專案解決了?原
細節css消除移動端預設樣式
1.避免長按網頁出現選中樣式:-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select:
如何在CSS中新增手機端(移動端)自適應樣式
通用手機端樣式: @media all and (orientation : portrait) { /*豎屏*/ } @media all and (orientation : landscape) { /*橫屏*/ } 指定手機端高度樣式: @medi
移動端頁面初始化的css樣式
初始化的css樣式 reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acro
PC和移動端的CSS重置樣式表
自己一直在用並不斷完善的重置樣式表,直接放到專案裡面可讓瀏覽器樣式基本統一,現分兩個版本,針對不同平臺作出優化。 PC端 html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-tex
使用css 3實現 移動端 文本 點點的效果
ext overflow webkit wrap kit hidden -c pre idt { width: 200px; text-overflow: ellipsis; /*white-space: nowrap;*/ overflow: hi
移動端h5開發相關內容總結css篇--自己總結
pan class 寬度 absolute html ive min-width 百分比 number 原文參考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ1.開發移動端,頭部必要的配置<meta name="vie