頁面佈局整理（基於scss）

頁面開發步驟：

一、全局reset、設置基礎背景色、設置基礎字體樣式

二、全局佈局頁面結構,meta 標籤引入

三、按鈕等相同的樣式，用scss提早寫好一份公用,漸變等 border-radius box-shadow ,水平垂直居中

四、兼容的樣式，提早寫好scss,統一引用

五、盒子模型，怪異型(border-box)和標準型(content-box)

六、移動端若是須要識別二維碼

全局reset、設置基礎背景色、設置基礎字體樣式

統一reset

// 方案一：
*{
  margin: 0;
  padding: 0;
  outline: none;
}
body {
  background-color: #f8f8f8;  //基礎背景色
  font: 14px/1.5 "微軟雅黑","Microsoft YaHei",宋體"; //基礎字體樣式
  color: #7d7d7d; //基礎字體顏色
  position:relative;
}
// 去掉常見標籤的基礎樣式
// 去掉a標籤樣式，並繼承父級顏色
a {
  cursor: pointer; 
  color: inherit;
  display: inline-block;
  text-decoration: none;
}
ul,li { 
  list-style-type: none;
}
input {
  outline: none;
  -webkit-apperance: none; // 去掉ios輸入框內部陰影
}
.div {
-webkit-user-select: none;// 移動端禁止選中內容
}

/*去掉點擊時出現的黑色陰影*/
a,input,button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 移動端取消touch高亮效果
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 方案二：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img{
  margin:0;
  padding:0;
  border:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body{
  color:#333; 
  font-size:16px;
  font: 14px/1.5 "微軟雅黑","Microsoft YaHei",宋體"; //基礎字體樣式
}
ul,li,ol{
 list-style-type:none;
}
select,input,img,select{
  vertical-align:middle;
}
input{
  font-size:12px;
}
a{ 
  text-decoration:none;
  outline:none;
}
.clear{
  overflow:hidden;
}
p,li{ 
  letter-spacing: 1px;
}
img{
  display:block;width:100%;
}

// 移動端css（若是有二維碼的多圖頁面）

// 一、若是直接將圖片暴露在最外面，點擊圖片，會出現圖片直接全屏顯示，禁止移動端圖片的點擊事件，用下面的css，兼容性  ie11+
// 二、若是引入的圖片較多，同時又有二維碼須要長按識別，能夠將圖片全局設置成none, 其中二維碼圖片的img  設置成auto;
img {
    pointer-events: none; // auto默認值
}
.img-no-click {
    pointer-envents: none;
}

全局佈局頁面結構

頁面常見佈局

pc

.layout {
  width: 110px;
  margin: 0 auto;
}

// 左右浮動
.fl { 
  float: left;
}
.fr { 
  float: right;
}
// 經常使用清除浮動
.clearfix:after {
  content:"."; 
  display:block; 
  height:0; 
  visibility:hidden; 
  clear:both;
}
.clearfix { 
  *zoom:1;
}

// 多行文本溢出
.div{
  display:-webkit-box !important;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;  
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;(數字2表示隱藏兩行)
}

    
// 單行文本溢出
.div{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

// 統一怪異盒子模型
.border-box { 
  box-sizing: border-box;
  -webkit-box-sizing: 
  border-box;
  -moz-box-sizing: border-box;
}

// 統一標準盒子模型
.content-box { 
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}

添加相關的meta 標籤

<!--必須加載-->
<meta charset='utf-8'>
<meta name="keywords" content="html5,css3,vue,axios,vuex"> <!-- 關鍵詞 -->
<meta name="description" content="hzzly,xyy-vue"> <!-- 網站內容描述 -->

<!--按需添加-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <!--移動端-->

<meta name="format-detection" content="telephone=no, email=no"> <!--忽略頁面中數字格式和郵箱格式識別爲電話號碼和郵箱-->

<meta http-equiv="Cache-Control" content="no-siteapp"/>  <!--禁止百度快照緩存-->

<meta name="renderer" content="webkit">  <!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">  <!-- 優先使用 IE 最新版本和 Chrome -->

<meta name="screen-orientation" content="portrait"><!-- uc強制豎屏 -->
<meta name="browsermode" content="application"><!-- UC應用模式 -->
<meta name="full-screen" content="yes"><!-- UC強制全屏 -->

<meta name="x5-orientation" content="portrait"><!-- QQ強制豎屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ強制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ應用模式 -->

<meta name="apple-mobile-web-app-capable" content="no"><!--刪除默認的蘋果工具欄和菜單欄。yes爲顯示工具欄和菜單欄-->

<input type="text" autocapitalize="off" /><!--關閉iOS鍵盤首字母自動大寫-->

按鈕等通用樣式,精簡css,(scss)

// 按鈕
@mixin btn-style($width, $height, $fontSize, $color, $backgroundColor ) {
  width: $width;
  height: $height;
  display: block;
  text-align: center;
  line-height: $height;
  font-size: $fontSize;
  color: $color;
  background: $backgroundColor;
  opacity: 0.9;
  &:hover {
    opacity: 1;
  }
}

// 定義三角形
/* 方向 三角的寬度 三角的顏色 */
@mixin arrow($direction, $width, $color) {
    width: 0;
    height: 0;
    line-height: 0;
    border-width: $width;
    border-style: solid;
    @if $direction == top {
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == left {
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
    @else if $direction == right {
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
}
// 使用
<div class="trangle"></div>
.trangle {
    @include arrow(bottom, 10px, #f00)
}

// css 公用
.errtxt {
    width: 1100px;
    height: 200px;
    border: 1px solid #ccc;
}
// 引用
.box {
    color: #999;
    @extend .errtxt;
}

兼容早定義

// 圓角兼容
@mixin border-radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 從上到下漸變
@mixin gradient($startColor, $endColor) {
    background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%,$endColor));
    background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: -o-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: linear-gradient(to bottom, $startColor 0%,$endColor 100%);
}

// 從左到右漸變
@mixin gradient($startColor, $endColor) {
  background-image: -moz-linear-gradient(left, $startColor 0%, $endColor 100%);
  background-image: -webkit-gradient(linear, left top, right top,color-stop(0%,$startColor, color-stop(100%,r$endColor;
  background-image: -webkit-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: -o-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: -ms-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: linear-gradient(to right, $startColor 0%,$endColor 100%);
}

// 放大
@mixin scale($scale){
  -webkit-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}

// 引用：
.notice {
  background:#fff;
  @include border-radius;
}

不定寬高的水平垂直居中

//方法： 父元素相對定位，子元素絕對定位
//html結構

<div class="box">
  <div class="child"></div>
</div>

//css

/* 方法一 */
.box {
    width: 300px;
    height: 300px;
    position: relative;
    background: #ccc;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    z-index: 10;
    background:#ff0;
}

/* 方法二 */
.child {
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    -webkit-transform:translate(-50%, -50%);//兼容性ie10+
    background:#ff0;
}
/* 方法三 */
.child {
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    margin-left: -50px;
    margin-top: -50px;
    background:#ff0;
}

/* 方法四 */
.box {
   justify-content:center; //子元素水平居中，
   align-items:center; //子元素垂直居中;
   display: -webkit-flex;  /* 新版本語法: Chrome 21+ */
   display: flex;          /* 新版本語法: Opera 12.1, Firefox 22+ */
   display: -webkit-box;   /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
   display: -moz-box;      /* 老版本語法: Firefox (buggy) */
   display: -ms-flexbox;   /* 混合版本語法: IE 10 */  
}

以上前三種方法都是利用絕對定位處理。第四中方法是flex

## rem佈局寫法

// 給html基礎像素
function init(){
    var fontSize = document.documentElement.clientWidth;
    document.body.parentNode.style.fontSize = fontSize +'px';
}
init();

$basePx:750;// 設計圖像素750*x
@function pxCount($px){
  @return $px/$basePx+rem;
}