前端移动端开发经验总结

1092 0 0

作者:风风coding

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

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   }

内容来源于网络如有侵权请私信删除

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

前端移动端开发经验总结