移动端css尺寸适配方案

移动端页面等比例放大缩小适配方案


  做了四个多月微信小程序的开发，受rpx单位的影响，想着能不能单纯的利用css做出rpx的效果，拿个移动端的项目练了一下手，分享一下方案。不熟悉小程序rpx单位的童鞋自行了解。


  也不算是单纯的css吧，借助了sass，其实less等等其他的css预处理语言都可以，只要它有自定义function的功能和计算的功能即可，本人习惯用sass而已。不了解sass的自行去官网学习。


  下面是sass源代码，这里建议单独写成一个sass文件，在每个页面的sass文件中引用就可以了。
  //定义的默认字体的大小，这里建议写成死的16px，若要改基本字体的大小，请将下方的1rem改成其他数字。
  $browser-default-font-size: 16px !default;
  //设计图的高
  $basicHeight: 667px !default;
  //设计稿的宽
  $basicWidth: 375px !default;
  
  //字体px转换成rem单位的方法
  @function pxTorem($px){
    @return $px / $browser-default-font-size * 1rem;
  }
  
  //元素高度转换成vh单位的方法
  @function pxTovh($px){
    //$px为需要转换的高度
    @return $px / $basicHeight * 100vh;
  }


  //元素宽度转换成vw单位的方法
  @function pxTovw($px){
     //$px为需要转换的字号
     @return $px / $basicWidth * 100vw;
  }


  这里要多说一句，vw和vh，在pc端不支持低版本的IE浏览器，慎用。移动端基本主流的浏览器/内核d都支持，所以可以放心大胆的用。


  再多说一句，由于平板宽高比和手机宽高比不太一致，所以会导致有些有背景图片需求的网页变形，图片被截掉了好多，但是，一般的功能性布局，就是手写的样式和元素，一般不会乱，能实现大概的等比例放大缩小的样子，ipad pro可能会有一个中文字符的偏差。


  以上。