移动开发中的常见问题

移动开发中常见问题

1. 利用padding-top，进行占位和宽高自适应

   • 容器的高度是基于父级的 padding和margin是基于宽度的

   • 比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px

     padding-top就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

   • 想要自适应屏幕大小，可以设置宽度自适应，width:20%(box-sizing:border-box),但是高度是被内容撑开的，一般不定，通过百分比设置就不适用

   • 图片加载时需要时间的，即使网页加载熟读已经很快了，由于高度撑开的过程，不可避免会出现闪烁

• padding-top:calc(100%*580/1920)

• 为图片定位为绝对定位，并为item添加相对定位

   img{
              max-width: 100%;
          }
          html,
          body{
              height:100%;
          }
          .img-wrapper{
              width: 100%;
              height: 0;
              padding-top: calc(100% * 580/1920);
              border: 1px solid #ff0;
              position: relative;
          }
          .img-wrapper img {
              position: absolute;
              left: 0;
              right: 0;
              top: 0 ;
              bottom: 0;
          }
  

2. em基于父级的大小 1em是基于本身

   • 注意：浏览器的默认字体大小是16px，所以未经调整的浏览器都符合1em=16px,chrome默认的字体大小是12px，也就是12px=0.75em,10px=0.625px

   ​

   div {
     font-size: 40px;
     width: 10em; /* 400px */
     height: 10em;
     border: solid 1px black;
   }
   p {
     font-size: 0.5em; /* 20px */ 
     width: 10em; /* 200px */
     height: 10em;
     border: solid 1px red;
   }
   

3. rem是基于HTML的大小 62.5%

   ​

   html {
       font-size: 10px;
       }
   div {
       font-size: 4rem; /* 40px */
       width: 30rem;  /* 300px */
       height: 30rem;
       border: solid 1px black;
   }
   

4. 媒体查询断点

   @media only screen and (min-width : 480px) {
   
   }
   

5. vm布局

   • 视图宽度：1vw 等于视图宽度1%，100vw等于视图宽度100%

6. 1个像素

   • retina屏1像素实际上是4个像素

     1. 边框宽度设置0.5不生效，box-shadow可以

        div {
            -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
        }
        

     2. 媒体查询利用设备像素比缩放，设置小数像素

        .border { border: 1px solid #999 }
        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .border { border: 0.5px solid #999 }
        }
        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            .border { border: 0.333333px solid #999 }
        }
        //缺点：对设备有要求，小数像素目前兼容性较差
        

   ​