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

移動端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