你的尺寸真的合适吗

上一章，我提到要分享我的适配方式，当时断断续续的写完，最后给忘了，真的太粗心了，这篇文章里面，我略微介绍一下。

 

1. px2vwAndvh

       一次偶然的机会，我在csdn上找到的这个软件，其实并不复杂就是一些简单的计算，用于将单位(px)转化为单位(vw)或者单位(vh),帮我们省去很多计算的过程，

      页面是非常简洁的。我们所要做的就是按照所拿到的设计搞，将上面的PSD宽度，PSD高度设置完，然后我们就可以将我们实际量到的值填入，会帮我们转为vw或者vh。(存在较大的误差，不推荐使用在比较精细的页面之中。毕竟我们追求的是0像素还原)

链接：https://pan.baidu.com/s/19bI2BsUgYRG9YalOzAD3sA

提取码：iv4u

复制这段内容后打开百度网盘手机App，操作更方便哦

 

        2.sass

        一种css预处理器，其功能非常强大

 

        1.允许在代码中使用算式。

栗子：  .head{    height:(14px/2);    right:$var*10%  }

    

         2.允许使用变量

$len=10pxdiv{  height:$len}

        3.允许嵌套

        这是最有意思的一种写法在我看来，代码非常的好看。

原来的写法  body div{    backgroune:right  } 使用sass body{   div{     background:right   } }

         

            4.代码的重用

            允许一个选择器，继承另一个选择器。

  .len{    height:10px  }  .len2{    @extend .len1;  }

 

            5.插入文件

             插入外部文件

@import "foo.csss"

          

              6.Mixin

        可以用@Mixin定义一个代码块

        

@Mixin fun($value:10px){  float:left;  margin-left:$value}​div{  @include left(20px)}

        这里设置了默认值，在我们使用@include调用的时候，我们可以填入我们需要的参数。

 

 

        高级用法。

 

        1.for循环

@for $i from 1 to 10{  .border-#{$i}{    border:#{$i}px   }}

        

        2.@if和@else

 

div{  @if 1==1{}  @else{}}

      

          3.each

  

@each $number in a,b,c,d{  .#{$number}{    background:url("../images/#{$number}.jpg")  }}​

 

           4.允许自定义函数

 

@function double($fn){  @return $fn*2}​#div{  width:double(5px)}

       

       说了这么多，扯远了，我们还说回到我们的适配问题，我提供的这个文件打开来的目录结构是这样的。

        我使用的是vscode这款编译器，安装一下easy sass这个插件，能够帮助我们将sass文件转为css文件。

 

        

       在使用的时候，我们将那个文件夹引入我们的项目，在新建的sass文件开头写入下面的代码。

 

 

        对于最关键的适配问题，里面已经经过处理，只需将量出来的填入rem中，会自己处理，非常方便。

 

 

 

链接：https://pan.baidu.com/s/1Y8UsMmcv-og_0-ucjbE3xQ

提取码：78at

复制这段内容后打开百度网盘手机App，操作更方便哦

 

如果有更好的适配方式请一起研究。