移动端前端开发注意事项

移动端

1，高度不是按百分比设置，而是直接设置高度px或者em,百分比容易变形

2，宽度按照百分比来衡量

3，一般父级div不直接设置宽高，而是由子级div撑起来

4，对相同元素不同机型样式适配用媒体查询，即@media

     推荐文章：1）媒体查询1

                       2）媒体查询2

5，如何让子级div相对于父级div垂直居中

position:relative;
height:80px;
width:100%;
line-height:80px;
vertical-align:middle;
text-align:center;

注意：height和vertical-align一定要设置成绝对高度，不能按照百分比形式，否则失效

6,ul下的li不显示图标原因

    原因一：整体div将图标挤出去了，解决办法

list-style-type: disc;
list-style-position: inside;

  7，移动端头部和底部栏不能设置高度，否则在iphone 下存在问题

       头部内部元素定位与底部看齐，即bottom或margin-bottom;

       底部内部元素定位与上端看齐，即top或margin-top

8 ，编写页面时需要在合适的地方用定位，一般不全篇用position,若用ionic，严禁用position:fixed撑起底部，一般用ionic自带的底部插件写底部按钮或其他元素  

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>