移動WEBAPP開發常規CSS樣式總結

時間 2020-06-19

標籤移動 webapp 開發常規 css 樣式總結欄目無線简体版

原文原文鏈接

我所使用到的HTML頁面標籤：css

Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ；詳細說明我就不說了，只給新手說下，爲何W3C那麼多標籤，只使用16個就能夠把整個項目解決了？html

緣由是不要覺得標籤多，咱們就必定要使用到它的，咱們要的是使用普遍的，易記的。前端

稍微解釋下，塊級元素和行內元素是什麼意思？web

塊級元素就是他佔滿一行的；行內元素就是他的多個同類能夠同時在同一行。ajax

下面講解下，head標籤裏面咱們在移動端通常都放什麼？chrome

Title,meta,link,3個標籤會比較多，解釋請看：編程

Title:該網頁的標題，這個標題通常會顯示在瀏覽器打開該網頁時，最地址欄上面能夠簡單文字段。瀏覽器

Meta:緩存

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；user-scalable: 用戶是否能夠手動縮放

第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

第五個meta標籤:用於忽略將頁面中郵件地址

第六個就是最大的高度限定在568Px之內，這個能夠忽略，由於咱們都會用滑動來代替；固然了，能夠用在頁面佈局很少的地方！

Link:通常只是引入css文件用的，對於import大部分前輩都說很差，並且他通常也只寫在css文件內。咱們假如打開一個剛剛下載到本地的網頁或框架，瀏覽頁面時很慢，估計也就是在css裏面引入了谷歌文件，由於咱們國內，谷歌是被封殺的！

Javascript呢？(通常狀況下，把引入文件放到</body>前面的)

下面解釋放到head和</body>2個不一樣地方的區別：

放在head就是廣泛須要用戶進行點擊或各類操做才觸發的事件。

放在</body>裏面就是用戶來看以前就執行了。

如今咱們來看看CSS的問題了：

1，我相信99%作過1個項目的人都會了解：reset.css(重置文件或common.css,base.css，名稱不同而已，用途都同樣。)

我會共享我本身今年所總結積累好的文件寫到common.css裏面。

@charset "utf-8";
html,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}
body,button,input,select,textarea {font:14px \5b8b\4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif\"Microsoft YaHei"\"微軟雅黑";line-height:20px;}
h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:18px;}
@media only screen and (min-width:360px) {
    h1{font-size:28px;}
    h2{font-size:26px;}
    h3{font-size:22px;}
    body,button,input,select,textarea {font-size:18px;line-height:26px;}
}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋轉屏幕時自動調整字體大小*/
textarea{resize:none;}
/*取消按鈕在inphone上的默認樣式*/
input[type=button]{-webkit-appearance:none;outline:none} 
input::-webkit-input-placeholder{color:#F0F0F0;}
textarea::-webkit-input-placeholder{color:#F0F0F0;}
input::-webkit-input-speech-button {display:none}
table {border-collapse:collapse;border-spacing:0;}
th {text-align:inherit;}
fieldset,img {border:none;}
abbr,acronym {border:none;font-variant:normal;}
del {text-decoration:line-through;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
ins,a,a:hover {text-decoration:none;}
a:focus,*:focus {outline:none;}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;overflow:hidden;}
.clearfix {zoom:1;}
.clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}
.hide {display:none;}
.block {display:block;}
.outL{white-space:normal;word-break:break-all;width:100px;}
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}
/*佈局*/
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.rel{position:relative;}
.abs{position:absolute;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.dib{display:inline-block;}
.vab{vertical-align:bottom;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}
/*網格*/
.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}
.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.grid{*zoom:1}
.grid:before,.grid:after{display:table;content:"";line-height:0}
.grid:after{clear:both}
.grid{list-style-type:none;padding:0;margin:0}
.grid>.grid{clear:none;float:left;margin:0 !important}
.wrap{float:left;width:100%}
/*網格*/
/*flex*/
.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}
.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}
.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}
.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}
.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}
/*flex*/
/*容器*/
.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch;}
/*頭尾*/
header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}
header{top:0;height:44px;}
footer{bottom:0;}

/*寬度*/
.w100p{width:100%}
.w20p{width:20%;}

/*邊距*/
.m5{margin:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}

注意事項：

一、你使用display:inline-block瀏覽器是會有默認邊距產生的，因此假如想幾個div變成行內的並且無邊距，那麼最好的方法是使用同一方向的浮動(float)，來解決無邊距的一列。

二、引入個人css文件後，你會發現爲何我在字體上要進行個斷點設置(@media)，我認真的分析過，webapp頁面的因爲在320px,360px,480px，3個不一樣viewport寬度大小的狀況下製做，那麼字體大小確定要進行相應的設置，否則你在320px的狀況下看到的效果跟在480px下看到的是同樣。注意：字體是不會自適應的，只有本身進行設置才能夠達到預期效果。

三、圖標是一樣不會自適應的，只有圖片能夠設置100%，因此圖標假如設置100%就會影響總體佈局，寬度能夠在Img裏面寫width=」30」這樣(30是圖片的寬度30px)。

四、除了有時header，footer是要求固定fixed定位外，那麼中間要作一個容器/外套給他，咱們須要在header下面使用wrapper/container放內容。這個怎麼設置，你能夠看個人css文件已經作好設置並且包括了案例方便查看。而且能夠進行內容過多能夠滑動。(關於fixed定位的問題，我屢次測試的結果發現，在2.3系統如下的低端手機是不支持fixed定位的，是會出現設備兼容問題:向下滑動時，固定後也會隨着頁面移動，4.0以上的系統是能夠支持，相對較好的解決方法是：使用iscoll.js；會有卡頓，可是對於低端機來說是不錯的解決方案。)我我的是選擇放棄2.3系統如下的用戶羣，由於如今的手機1000元左右就能夠買到4.0系統以上的手機，因此，我有理由相信連手機都不肯意更換的廣泛有2種狀況：1，沒錢，2，根本不可能成爲你的用戶；我不會像PC端那樣來兼容IE6-8，我如今惟一興幸的是公司如今沒特定標準要求，因此我能夠自由選擇，我只須要知道這個解決方法就行；我既然放棄低端機市場，那麼我就會以最新的技術來進行佈局，因此我不使用iscoll.js，直接用我上面的那個wrapper來做爲外套就行。

五、咱們若是須要將內容實現2邊留有邊距，使用的是padding而不是margin。由於設置爲margin的話，會出現左邊有空白邊距，右邊反而是貼邊的狀況。

六、咱們作前端寫頁面最煩的就是class命名，我不喜歡使用下劃線，因此咱們能夠這樣來定義class命名方式：asideContent等狀況。還有一種叫意義命名；好比說顏色：紅色，咱們能夠定義爲：.red:color:red；模塊呢？咱們能夠這樣來作：好比我最近作的一個WP手機風格的webapp頁面項目。你們都應該瞭解他是色塊組成，顏色，大小等都不同。

個人解決方案是：(在銷售模塊，定義爲sell)

sellHead:內容的頭部；sellFoot:內容的尾部；

如此類推就有：sellMain；sellContent；sellTitle；sellList；sellTab；sellMenu；sellBtn；sellMsg；sellBanner；sellCol；

我相信大家看到英文都容易的理解這個是什麼意思，位置對應狀況。

七、從有了前端這個職稱後，就逐漸開始流行：OOCSS的寫法來佈局CSS頁面了。是什麼意思？就是用面向對象編程的思想來寫CSS，由於如今有了Less,Sass這些了，CSS均可以實現編程了，咱們前端的壓力就愈來愈大了。最主要的一點就是實行模塊化，代碼能夠重複使用。對於沒編程基礎的童鞋來講，真心不懂這些專業的術語是個什麼東東？你們能夠看看下面個人解釋：

(1)、.sellContent{width:200px;height:200px;margin:10px;padding:10px}

注意：背景顏色，邊框，圓角這些就不要寫在裏面了

(2)、.bg{background:#00CC66}；在HTML頁面的class=」sellContent bg」。

(一)、實現的是class組合，同時這2個class類是哪裏須要往哪裏放，須要什麼呢？固然是他裏面的屬性，只要是他須要該屬性的均可以放到一塊兒組合。(組合通常狀況下不要超過4個)

(二)、之前咱們寫css多是遇到到哪一個div須要就給他定義那些屬性值，並且整個頁面下來重複的特別多；如今我這樣方式不須要了，咱們能夠用並列式選擇器：.sellMain,.sellContent,.sellTitle{border:1px solid #cccccc}，減小代碼重複的狀況，同時繼承選擇器的做用咱們就要注意了：一個項目下來，咱們寫的頁面會達到100個以上，假如我寫 ul li{display:inline-block}這樣的話，那麼你每一個頁面只要有li的，他都會是變成行內元素。

因此，咱們寫頁面前必需要先把整個項目的全部頁面看一次，腦殼進行一次佈局，這樣就不會出現這類的問題了。要全面的去理解這個OOCSS的寫法，建議你去下載Bootstrap框架文件來看他的源碼，和頁面案例的佈局。

八、區分min-width和max-width的區別，英文咱們都看懂，但用的話就不必定了；min-width：最小的寬度爲多少的時候開始執行下面的斷點佈局；max-width：最大的寬度爲多少的時候中止執行下面的斷點佈局。

如：min-width:360px and max-width:480px,就是下面的類只在360px-480px之間執行。

注意：有時候咱們在谷歌或火狐瀏覽器作測試的，而後放到真機測試時會發現，真機有時候會比瀏覽器顯示的viewport寬度還要小3px—5px。

九、作頭部的時候我每每最討厭的就是圖片和文字對齊；如今我找到新的解決放案了：

(1)、能夠把這個img給他一個下邊距:負值；

(2)、有3個屬性值能夠選擇來用vertical-align:top/middle/bottom 。

十、咱們作移動端的時候，凡有a標籤點擊轉連接的地方都會系統自帶一個透明層的點擊效果，取消點擊高亮：-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;

十一、響應式佈局與自適應佈局：(如下僅爲我的理解)

(1)、響應式佈局，個人理解是在電腦，平板，手機，分別有不一樣的頁面佈局。

(2)、自適應佈局，個人理解是在電腦，平板，手機頁面佈局同樣，只是文字大小，圖片大小會發生變化而已。

在電腦上，使用flex-wrap:wrap（伸縮進行換行）這個來進行佈局是能夠達到響應的，可是在平板和手機就目前來講還不支持這個屬性。

我推薦的最佳方案是使用flex佈局。(只是不用伸縮換行屬性)

下面是我作的一個簡單案例：

注意：style.css引用的是上面提供的common.css文件：

<!DOCTYPE html>
<html>
<head>
    <title>首頁</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <!--開發後刪除-->
    <meta http-equiv="Cache-Control" name="no-store" />
    <meta http-equiv="refresh" content="3" />
    <!--開發後刪除-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
        .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
    </style>
</head>

    <body>
        <header>
            <ol class="row">
                <li class="m5">
                    <img src="img/back.png" width="30" /> </li>
                <li class="flex3 m5">
                    <h1>header</h1>
                </li>
                <li class="m5">
                    <img src="img/down.png" width="30" />
                </li>
            </ol>
        </header>
        <section class="wrapper">
            <ul class="row">
                <li class="flexcontent p5">1</li>
                <li class="flexcontent p5">2</li>
                <li class="flexcontent p5">3</li>
                <li class="flexcontent p5">4</li>
                <li class="flexcontent p5">5</li>
            </ul>
            <ul class="row">
                <li class="flex1 flexcontent p5">1</li>
                <li class="flex3 flexcontent p5">2</li>
                <li class="flex2 flexcontent p5">3</li>
            </ul>
        </section>
        <footer class="row tac">
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
        </footer>
        
    </body>
</html>

　　CSS3的animate.css動態的使用介紹：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>animate.css 使用方法</title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
<style>

#bridge{
    border-radius: 15px;
    background: url('images/bridge.png') no-repeat 50% 50%;
    margin: 0 auto;
    width: 400px;
    height: 250px;
    z-index: 20;
    position: static;
}

</style>

</head>

<body>

<div id="bridge" class="animated flash">
<!--只須要在相關的塊級標籤內添加class；
例如：
class="animated bounceOutLeft"
class="animated flash"

-->
</div>

</body>
</html>

分析開發的斷點：

(1)、國內市場廣泛的viewport寬度是320px和360px，像Note2才400px；分辨率，像素這些詞語通常是告訴給設計師，咱們前端要明白的是viewport；

(2)、字體大小：我相信有部分童鞋會認爲瀏覽器會自適應讓你頁面的字體隨着不一樣的屏幕大小而自動適應，我告訴你，你錯了！

這些字體自適應都是人爲設置出來的，我推薦的方案是：

body{font:14px line-height:20px}//網頁總體字體以14px爲主。

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}

h1{font-size:24px}

h2{font-size:22px}

h3{font-size:18px}

@media only screen and (min-width:360px) {

body,button,input,select,textarea {font-size:18px;line-height:26px;}

h1{font-size:28px}

h2{font-size:26px}

h3{font-size:22px}

}

(3)、class類控制分析：

看到上面大概也瞭解怎麼使用@media了吧；

另外，定義類名的第一個重要性就在這裏了：由於你要控制一個class類在320px或360px不一樣的屏幕上有適應屏幕大小的樣式結構！

(4)、咱們開發時，通常要作到兼容的瀏覽器廣泛是國內的瀏覽器(蘋果的瀏覽器都是webkit內核)：UC，QQ，360，百度，這些瀏覽器是國內使用用戶量最大的瀏覽器廠商，雖然不是內核都同樣，可是廣泛的兼容問題還不是不少，因此咱們優先選擇兼容的是webkit內核的。

(5)、前端開發性能優化(我的總結建議)：

1、單個文件大小不要超過14KB；插件不要超過25KB。

2、優先選擇使用字體圖標，非要用上圖片的話，就使用CSS Sprite方法。同時，將整合到一張圖片的圖標集合和在網站或webapp不經常使用的圖片進行壓縮。

3、seo優化問題：咱們常寫代碼時會常常忽略這個標籤會帶上title,alt等這些能夠填上關鍵詞的地方，這個是必需要說明下，不過在手機端的話，這個好像還真用不上吧。

4、CSS，JS以模塊化形式來作項目，CSS:咱們能夠用@import url('form.css')這樣的形式來操做，把多個不一樣的css來分開寫，而後逐個引入；問題是：@import是頁面先加載完html再加載css，因此這個你得考量，這個文件是在什麼狀況下才使用好;JavaScript：咱們可使用sea.js或require.js來操做，網上有相關的指導教程，你能夠百度或谷歌一下。

5、利用CDN技術，減輕空間資源；對企業來說，這個風險有點大；由於手機用戶的網絡差時會出現文件不必定能及時加載等問題。

6、圖片多使用PNG8來達到優化效果。

7、少對圖片進行硬性設置寬高。

8、減小頁面請求：CSS，JS，圖片數量的多少會對請求有影響；同時要注意class類組合通常狀況下不要超過4個，超過的儘可能以取個新的class類名來定義會好點。

9、減小DOM訪問次數，加載數量多了就影響訪問速度。

10、不要出現404頁面，避免重定向。

11、減小cookies體積，設置合理的過時時間。

12、緩存ajax，用get方式提交；form以post方式提交。