前端移动端开发经验总结

html {
    font-size: 12px;
}

1 .section{
2     width:25%;
3     height:48px;
4     background-color: greenyellow;
5   }

1 .section{
2     width:25%;
3     height:3rem;
4     background-color: royalblue;
5   }

 1 @mixin border-1px($color) {
 2     position: relative;
 3 
 4     &:after {
 5       display: block;
 6       position: absolute;
 7       left: 0;
 8       bottom: 0;
 9       width: 100%;
10       height: 100%;
11       border: 1px solid $color;
12       content: ' ';
13     }
14   }
15 
16   @mixin border-1px-two($color) {
17     position: relative;
18 
19     &:before {
20       content: '';
21       position: absolute;
22       width: 200%;
23       height: 200%;
24       border: 1px solid #000;
25       transform-origin: 0 0;
26       transform: scale(0.5, 0.5);
27       box-sizing: border-box;
28     }
29   }
30 
31   .section, .footer {
32     width: 20%;
33     height: 2rem;
34     margin-right:3px;
35   }
36 
37   .section {
38     @include border-1px(red);
39   }
40 
41   .footer {
42     @include border-1px-two(green);
43   }

<style scoped>

1     <section class="section">
2         <p>
3           用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
4           用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
5           用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
6         </p>
7     </section>

1 .section {
2     background-color: #999;  // 自定义
3     height:20px;             // 自定义  
4     overflow: hidden;        // 必须写
5     text-overflow: ellipsis; // 必须写
6     white-space: nowrap;     // 必须写
7   }

1 .section {
2     background-color: #999;   /*自定义*/
3     overflow : hidden;
4     text-overflow: ellipsis;
5     display: -webkit-box;           /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
6     -webkit-line-clamp: 2;          /*必须结合的属性 ，用来限制在一个块元素显示的文本的行数*/
7     -webkit-box-orient: vertical;   /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式,
8                                       vertical：设置伸缩盒对象的子元素从上到下纵向排列*/
9   }

1       <header class="header">
2         <div>1</div>
3         <div>2</div>
4       </header>

 1 .header{
 2     display: flex;
 3     justify-content: space-between;
 4 
 5     :first-child {
 6        width:30%;
 7        height:100px;
 8        border:1px solid red;
 9      }
10 
11     :last-child{
12        width:30%;
13        height:100px;
14        background-color: green;
15      }
16   }

1     <!--可以滚动的区域-->
2     <section class="section">
3       <header class="header">
4         <div>1</div>
5         <div>2</div>
6       </header>
7     </section>
8     <!--fixed定位的底部-->
9     <footer class="footer"></footer>

1 .section {
2     position: absolute;
3 }

1 .section {
2     position: absolute;
3     width: 100%;
4     /*left: 0;*/
5     /*right: 0;*/
6   }