CSS笔记

1、字体断行

超出显示省略号

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

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; /* 强制英文单词断行 */
}

2、移动端自适应

使用媒体查询

@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元素的宽度在不同设备下显示了不同的宽度，实现了响应式适配的问题。

3、移动端一像素边框实现

设置视口缩放

参照（2、移动端自适应-设置视口缩放）内容，可以像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...

CSS笔记

1、字体断行

2、移动端自适应

使用媒体查询

宽度使用百分比

使用相对单位rem

设置视口缩放

3、移动端一像素边框实现

设置视口缩放

使用transform: scale

toutouping

引用和评论

vue-cli 4.x 和 vue 3.x 笔记

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式