開發十年，就只剩下這套架構體系了！ >>>   

檔案連結

全域性設定

1,重置樣式

* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    -webkit-appearance: none;
    box-sizing: border-box
}

2, body設定了預設的字號為14號，微軟雅黑字型，以及文字顏色#414141.

html {
    -webkit-tap-highlight-color: transparent;
    font-size: 62.5%
}

body {
    max-width: 640px;
    margin: 0 auto;
    color: #414141;
    font-family: Arial,'Microsoft Yahei';
    font-size: 1.4rem;
    line-height: 1.5em;
}

3, 所有元素的大小、寬度、間距等皆使用10px為基準 rem為單位設定 例如：

.demo{ font-size:1.2rem;   //相當於字號font-size:12px;}
.demo{ margin:0.4rem 1rem;   //相當於設定外間距margin:4px 10px;}
 

常用class屬性設定

圖片橫向全屏 class="img-full" 圖片橫向沾滿外部盒子空間，高度自適應，如需高度也沾滿盒子 請執行設定height:100%; 使用方法

<div><img src="" class="img-full"></div>

截圖文字

class="clamp1"  文字以一行顯示，多餘的部分自動擷取並以點顯示。
class="clamp2"  文字以兩行顯示，多餘的部分自動擷取並以點顯示。

浮動

class="clearfix"或 class="clear" 父級清除浮動，使用clearfix 或clear。
class="fl"  左浮動
class="fr"  右浮動
 

數字字型

class="Arial" 英文文字字型 font-family:Arial, Helvetica, sans-serif;

設定字號

class="fz10"  <=> font-size:10px;       class="fz11"  <=> font-size:11px;
class="fz12"  <=> font-size:12px;       class="fz13"  <=> font-size:13px;
class="fz14"  <=> font-size:14px;       class="fz15"  <=> font-size:15px;
class="fz16"  <=> font-size:16px;       class="fz18"  <=> font-size:18px;
class="fz20"  <=> font-size:20px;       class="fz21"  <=> font-size:21px;
class="fz22"  <=> font-size:22px;       class="fz24"  <=> font-size:24px;

內間距設定

class="pt2"  <=>padding-top:2px;     class="pt4"        class="pt5"
class="pt8"      class="pt10"        class="pt12"       class="pt15"    
class="pt20"

同理 class="pb2"  //padding-bottom:2px 
     class="pl2"  //padding-left:2px
     class="pr2"  //padding-right:2px
**外間距設定**
class="mt2"  <=>margin-top:2px;       class="mt4"         class="mt5"
class="mt8"     class="mt10"          class="mt12"        class="mt15"
class="mt20"
同理 class="mb2"  //margin-bottom:2px 
     class="ml2"  //margin-left:2px
     class="mr2"  //margin-right:2px

元素位置左右中

class="text-left"     //text-align:left;
class="text-center"   //text-align:center;
class="text-right"    //text-align:right;

圓角設定

class="radius2"  <=>border-radius:2px;       class="radius3"  <=>border-radius:3px;
class="radius4"  <=>border-radius:4px;       class="radius5"  <=>border-radius:5px;
class="radius6"  <=>border-radius:6px;       class="radius8"  <=>border-radius:8px;
class="radius10"  <=>border-radius:10px;     class="radius20"  <=>border-radius:20px;
class="radius50"  <=>border-radius:50%;

按鈕

class="btn-big"   //大按鈕，根據需求改變不同的背景色即可
class="btn-rule"  //活動規則，根據需求改變不同的背景色即可

相關推薦