CSS筆記

jackzou 發(fā)布于2019-08-30 14:21 / 956人閱讀

摘要：字體斷行超出顯示省略號(hào)屬性設(shè)置如何處理元素內(nèi)的空白默認(rèn)。其行為方式類似中的標(biāo)簽。某設(shè)計(jì)稿下個(gè)，橫向排布，每個(gè)的寬度為路徑名此時(shí)此時(shí)此時(shí)因此，一個(gè)的實(shí)際只有的元素的寬度在不同設(shè)備下顯示了不同的寬度，實(shí)現(xiàn)了響應(yīng)式適配的問(wèn)題。

1、字體斷行

超出顯示省略號(hào)

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

white-space 屬性設(shè)置如何處理元素內(nèi)的空白 
normal 默認(rèn)。空白會(huì)被瀏覽器忽略。 
pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。 
nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止。 
pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。 
pre-line 合并空白符序列，但是保留換行符。 
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。 
normal: 只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理) 
break-word:在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行

word-break 屬性用來(lái)標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句。

normal：使用瀏覽器默認(rèn)的換行規(guī)則。 
break-all:允許再單詞內(nèi)換行 
keep-all:只能在半角空格或連字符處換行

強(qiáng)制不換行

span {
    dispalay: inline-block;
    overflow: hidden; /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 如果內(nèi)容超出顯示為省略號(hào) */
    white-space: nowrap; /* 強(qiáng)制不換行 */
}

CSS自動(dòng)換行

span {
    dispalay: inline-block;
    word-break: normal; /* 自動(dòng)換行 */
}

強(qiáng)制斷行

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

2、移動(dòng)端自適應(yīng) 使用媒體查詢

@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" />

寬度使用百分比

由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以盡可能的使用百分比

使用相對(duì)單位rem

設(shè)計(jì)稿給什么尺寸，我們就將其縮小100倍，最后換算成rem單位。比如，設(shè)計(jì)稿上某個(gè)title的font-size為32px，此時(shí)寫CSS樣式時(shí)就直接縮小100倍，即0.32rem。

html元素的具體尺寸 = 設(shè)計(jì)稿尺寸 / 100 * (不同設(shè)備的理想視口寬度 / 基準(zhǔn)值(即設(shè)計(jì)稿橫向像素) * 100) (單位px)

當(dāng)1(單位rem) = html根元素的font-size = 不同設(shè)備的理想視口寬度 / 基準(zhǔn)值(即設(shè)計(jì)稿橫向像素) * 100 (單位px)時(shí)，html元素的具體尺寸 = 設(shè)計(jì)稿尺寸 / 100 (單位rem)

當(dāng)deviceWidth大于設(shè)計(jì)稿的橫向分辨率時(shí)，html的font-size始終等于設(shè)置為當(dāng)設(shè)備理想寬度等于設(shè)計(jì)稿橫向?qū)挾葧r(shí)的值

    

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

設(shè)置視口縮放

動(dòng)態(tài)設(shè)置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);

因此，可以直接根據(jù)設(shè)計(jì)稿的尺寸寫CSS樣式，如設(shè)計(jì)稿下有5個(gè)li元素，寬度為200px，此時(shí)不同設(shè)備下li的寬度

iPhone5 : li { width: 200px } 實(shí)際寬度為：100px
iPhone6 : li { width: 200px } 實(shí)際寬度為：100px
iPhone6+: li { width: 200px } 實(shí)際寬度為：66.667px

（2）動(dòng)態(tài)計(jì)算html的font-size

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

（3）布局的時(shí)候，各元素的css尺寸=設(shè)計(jì)稿標(biāo)注尺寸/設(shè)計(jì)稿橫向分辨率/10（不方便計(jì)算），或者通過(guò)css處理器（參考如下）

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

JS
// 設(shè)置根元素的font-size。通過(guò)獲取不同設(shè)備的理想視口寬度，再除以10。(除以10是因?yàn)椴幌雈ont-size太大。)
let idealViewWidth = window.screen.width;
document.documentElement.style.fontSize = idealViewWidth / 10 + "px";

在不同設(shè)備下根元素的`font-size`：

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

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

因此，一個(gè)200px的(實(shí)際只有100px)的li元素的寬度在不同設(shè)備下顯示了不同的寬度，實(shí)現(xiàn)了響應(yīng)式適配的問(wèn)題。

3、移動(dòng)端一像素邊框?qū)崿F(xiàn) 設(shè)置視口縮放

參照（2、移動(dòng)端自適應(yīng)-設(shè)置視口縮放）內(nèi)容，可以像PC web頁(yè)面一樣設(shè)置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;
}

媒體查詢實(shí)現(xiàn)

.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...

GPU云服務(wù)器云服務(wù)器兼容筆記印象筆記筆記云筆記

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115957.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jackzou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Verilog HDL 快速入門FPGA超級(jí)干貨第一季

閱讀 2435·2021-10-11 10:57
neironvps：1G內(nèi)存/1核/10gSSD/1T流量，洛杉磯vps/瑞士vps/德國(guó)vps，$

閱讀 1287·2021-10-09 09:59
網(wǎng)絡(luò)安全—xss

閱讀 2001·2019-08-30 15:53
獻(xiàn)給前端求職路上的你們（上）

閱讀 3218·2019-08-30 15:53
如何科學(xué)的組織React組件樣式

閱讀 1015·2019-08-30 15:45
美化文件上傳按鈕自定義input file樣式

閱讀 747·2019-08-30 15:44
Codepen 每日精選（2018-4-11）

閱讀 3455·2019-08-30 14:24
CSS筆記

閱讀 957·2019-08-30 14:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS筆記

相關(guān)文章

CSS Variables學(xué)習(xí)筆記

webpack深入與實(shí)戰(zhàn)筆記（20171015待續(xù)...）

**重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則**

**重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則**

**重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則**

發(fā)表評(píng)論

0條評(píng)論

jackzou

男|高級(jí)講師

TA的文章

Verilog HDL 快速入門FPGA超級(jí)干貨第一季

neironvps：1G內(nèi)存/1核/10gSSD/1T流量，洛杉磯vps/瑞士vps/德國(guó)vps，$

網(wǎng)絡(luò)安全—xss

獻(xiàn)給前端求職路上的你們（上）

如何科學(xué)的組織React組件樣式

美化文件上傳按鈕自定義input file樣式

Codepen 每日精選（2018-4-11）

CSS筆記

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS筆記

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！