CSS筆記

一、字體斷行

超出顯示省略號

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space 屬性設置如何處理元素內的空白 
normal 默認。空白會被瀏覽器忽略。 
pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre 標籤。 
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止。 
pre-wrap 保留空白符序列，可是正常地進行換行。 
pre-line 合併空白符序列，可是保留換行符。 
inherit 規定應該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。 
normal: 只在容許的斷字點換行(瀏覽器保持默認處理) 
break-word:在長單詞或URL地址內部進行換行

word-break 屬性用來標明怎麼樣進行單詞內的斷句。

normal：使用瀏覽器默認的換行規則。 
break-all:容許再單詞內換行 
keep-all:只能在半角空格或連字符處換行

強制不換行

span {
    dispalay: inline-block;
    overflow: hidden; /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 若是內容超出顯示爲省略號 */
    white-space: nowrap; /* 強制不換行 */
}

CSS自動換行

span {
    dispalay: inline-block;
    word-break: normal; /* 自動換行 */
}

強制斷行

span {
    dispalay: inline-block;
    word-break:break-all; /* 強制英文單詞斷行 */
}

---

二、移動端自適應

使用媒體查詢

@media (min-width: 768px) {
  .main {
    width: 25%;
    float: left;       
  }
}

link rel="stylesheet" type="text/css"
        media="screen and (min-width: 400px) and (max-device-width: 600px)"
        href="smallScreen.css" />

寬度使用百分比

因爲網頁會根據屏幕寬度調整佈局，因此儘量的使用百分比

使用相對單位rem

設計稿給什麼尺寸，咱們就將其縮小100倍，最後換算成rem單位。好比，設計稿上某個title的font-size爲32px，此時寫CSS樣式時就直接縮小100倍，即0.32rem。

• html元素的具體尺寸 = 設計稿尺寸 / 100 * (不一樣設備的理想視口寬度 / 基準值(即設計稿橫向像素) * 100) (單位px)
• 當1(單位rem) = html根元素的font-size = 不一樣設備的理想視口寬度 / 基準值(即設計稿橫向像素) * 100 (單位px)時，html元素的具體尺寸 = 設計稿尺寸 / 100 (單位rem)
• 當deviceWidth大於設計稿的橫向分辨率時，html的font-size始終等於 設置爲當設備理想寬度等於設計稿橫向寬度時的值

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

    //orientationchange方向改變事件
    (function (doc, win) {
        var docEl = doc.documentElement,//根元素html
        //判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        
        recalc = function () {
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            if(clientWidth > 1080) clientWidth = 1080;
            //把document的fontSize大小設置成跟窗口成必定比例的大小，從而實現響應式效果。
            docEl.style.fontSize = 20 * (clientWidth / 1080) + 'px'; // 1080 爲UI給的設計稿橫向像素
        };
        
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        //addEventListener事件方法接受三個參數：第一個是事件名稱好比點擊事件onclick，第二個是要執行的函數，第三個是布爾值
        doc.addEventListener('DOMContentLoaded', recalc, false)//綁定瀏覽器縮放與加載時間
    })(document, window);

設置視口縮放

• 動態設置viewport的scale

let dpr = window.devicePixelRatio;
let meta = document.createElement('meta');
let initialScale = 1 / dpr;
let maximumScale = 1 / dpr;
let minimumScale = 1 / dpr;
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${initialScale}, maximum-scale=${maximumScale}, minimum-scale=${minimumScale}`);
document.head.appendChild(meta);

所以，能夠直接根據設計稿的尺寸寫CSS樣式，如設計稿下有5個li元素，寬度爲200px，此時不一樣設備下li的寬度

iPhone5 : li { width: 200px } 實際寬度爲：100px
iPhone6 : li { width: 200px } 實際寬度爲：100px
iPhone6+: li { width: 200px } 實際寬度爲：66.667px

• （2）動態計算html的font-size

var clientWidth = document.documentElement.clientWidth;
if (!clientWidth) return;
if(clientWidth > 1080) clientWidth = 1080;
document.documentElement.style.fontSize = clientWidth / 10 + 'px';

• （3）佈局的時候，各元素的css尺寸=設計稿標註尺寸/設計稿橫向分辨率/10（不方便計算），或者經過css處理器（參考以下）

SASS
@baseFontSize: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
@function px2rem ($value) {
    $para: 75px;
    @return $value / @baseFontSize+ rem;
}

JS
// 設置根元素的font-size。經過獲取不一樣設備的理想視口寬度，再除以10。(除以10是由於不想font-size太大。)
let idealViewWidth = window.screen.width;
document.documentElement.style.fontSize = idealViewWidth / 10 + 'px';

在不一樣設備下根元素的`font-size`：

iPhone5 : 320px / 10 = 32px
iPhone6 : 375px / 10 = 37.5px
iPhone6+: 414px / 10 = 41.4px

根據以上，能夠看一個例子。某設計稿下5個li，橫向排布，每一個的寬度爲200px
CSS
@import (路徑名)
iPhone5: li { width: px2rem(200px) } => width: 85.333px
// 此時(200px / 75px = 2.667rem) 2.667rem = 2.667 * (320 / 10) = 85.3333px
iPhone6: li { width: px2rem(200px) } => width: 100px
// 此時(200px / 75px = 2.667rem) 2.667rem = 2.667 * (375 / 10) = 100px
iPhone6+: li { width: px2rem(200px) } => width: 4138px
// 此時(200px / 75px = 2.667rem) 2.667rem = 2.667 * (414 / 10) = 110.4138px

所以，一個200px的(實際只有100px)的li元素的寬度在不一樣設備下顯示了不一樣的寬度，實現了響應式適配的問題。

三、移動端一像素邊框實現

設置視口縮放

參照 （二、移動端自適應-設置視口縮放）內容，能夠像PC web頁面同樣設置1px

使用transform: scale

上邊緣框

.border-top-1px {
    position: relative;
}
.border-top-1px:before {
    position: absolute;
    content: '';
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid green;
    z-index: 10;
}

下邊緣框

.border-bottom-1px {
    position: relative;
}

.border-bottom-1px:before {
   content: '';
    position: absolute;
    bottom:0;    
    left:0;
    width: 100%;
    border-bottom: 1px solid green;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

四邊框

.border-1px {    
  position: relative;
}
.border-1px input {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: none;
    outline: none;
    text-overflow: ellipsis;
    background: transparent;
}
.border-1px:before {
  content: '';    
  position: absolute;    
  width: 200%;    
  height: 200%;    
  border: 1px solid #000;    
  -webkit-transform-origin: 0 0;   
  -moz-transform-origin: 0 0;    
  -ms-transform-origin: 0 0;    
  -o-transform-origin: 0 0;    
  transform-origin: 0 0;    
  -webkit-transform: scale(0.5, 0.5);    
  -ms-transform: scale(0.5, 0.5);   
  -o-transform: scale(0.5, 0.5);    
  transform: scale(0.5, 0.5);    
  -webkit-box-sizing: border-box;    
  -moz-box-sizing: border-box;    
  box-sizing: border-box;
}

媒體查詢實現

.border-bottom{
    position: relative;
    border-top: none !important;
}

.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

http://caibaojian.com/mobile-...
https://www.cnblogs.com/uncle...