前端移动端开发经验总结

2018-06-24 00:58:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

本文是对移动端多人协作开发项目一些经验总结

1、移动端自适应

2、scope的使用

3、webkit内核两行显示省略号

4、absolute下flex布局失效

1、移动端自适应

  正在开发一个APP项目,对于自适应有些体会

在移动端,宽度自适应可以使用百分比来控制,加上flexbox,width: 20%;

但是对于高度无能为力,后来发现大厂(淘宝,网易)推崇rem,这是CSS3新定义的,和传统的px,em不一样,rem是相对于根元素

<html>的font-size来定义的,默认1rem = 16px,如果自定义了font-size

 

html {
    font-size: 12px;
}

 

这时,1rem = 12px。这样对于高度可以通过rem来设置,不需要px

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   }

发现3rem = 48px,因为没有设置html的font-size

移动端最重要的是设备像素比dpr不同,常用的设计稿是750px,是iPhone6的物理像素,独立像素为375px,所以dpr=2

具体方案参照《使用Flexible实现手淘H5页面的终端适配

另外一个就是随处可见的border,因为设备像素比不同,我们设置的1px,是设备独立像素,例如iPhone6的Retina屏

设备会使用4个像素点2x2,去显示1个像素点,即1像素border会变成2像素border

在Chrome中输出,发现屏幕是高清屏

可以看出左边border比右边宽,再在iPhone6的屏幕下查看

更清晰的发现右边的边框为1像素,左边的不是

 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   }

以上是网上的两种解决方案,结果证明只有通过缩放才能达到1像素,当然继续缩放会有什么效果参考

再谈移动端适配和点5像素的由来

 

2、scope的使用

  HTML5 新元素scope,范围样式,已经在团队协作中广泛使用

<style scoped>

 

  个人开发可以在HTML中任何地方使用,限制样式只在元素及子元素生效,在Chrome查看

可以看到,scoped给下面写的样式,均添加了一个[data-v-*]来限制样式作用域,再看一个

在scoped下可以使用任何css样式,包括预处理器的所有特性

 

3、webkit内核两行显示省略号

  文本限制在一行显示,注意需要直接写在标签上,写在父元素没有效果

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   }

发现没有显示省略号,删除p标签,或者将样式写到p上

  在移动端绝大数浏览器都是webkit内核,可以使用私有属性-webkit-line-clamp

来限制显示的行数,还需要结合其他属性才能实现效果

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   }

 

4、absolute下flex布局失效

  FlexBox在移动端表现还是不错的,尤其对于多列布局,不需要传统的float或者inline-block

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   }

如图所示,多列可以自适应,后来需求变动,需要将footer定位在底部,并且中间内容是可以滚动的

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 }

  发现flex失效,后来经过研究发现,position: absolute;会导致宽度失效,只会展现内容撑开的高度

  只需要设定宽度100%,或者left,right为0

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:box-shadow技巧分享

下一篇:【轮子狂魔】手把手教你用JS给博客动态增加目录 - 超级懒人版