移动端如何进行尺寸自适应（px转rem）

写移动端项目了，首先考虑到的问题是如何让页面在不同尺寸的移动端能够得到完美的渲染。最开始的时候想法是设置@media的min和max,但是觉得不够方便。对mete进行了如下设置，并引用了手淘的js文件。

<script src=”http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js”><script>

但后续css页面中的各个尺寸实际上并没有得到解决，仍旧是要通过大量的计算，将px转到rem。由于目前尝试的项目比较大，这样子会消耗大量的时间，实际上是在做没有意义的工作。

以下是目前打算尝试的几种方法：

1.CSSREM

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件。

https://github.com/flashlizi/cssrem （下载）

将下载后的插件安装到sublime中，步骤如下:

1.进入packages目录：Sublime Text -> Preferences -> Browse Packages…

2.复制下载的cssrem目录到刚才的packges目录里。

3.重启Sublime Text

配置参数:

参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

px_to_rem – px转rem的单位比例，默认为40。

max_rem_fraction_length – px转rem的小数部分的最大长度。默认为6。

available_file_types – 启用此插件的文件类型。默认为：[“.css”, “.less”, “.sass”]。

效果：

2.CSS处理器

sass函数：

@function px2em($px, $base-font-size: 16px) {

    @if (unitless($px)) {

        @warn “Assuming #{$px} to be in pixels, attempting to convert it into pixels for you”;

        @return px2em($px + 0px); // That may fail.

    } @else if (unit($px) == em) {

        @return $px;

    }

    @return ($px / $base-font-size) * 1em;

}

sass的混合宏：

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){

    //Conver the baseline into rems

    $baseline-rem: $baseline-px / 1rem * 1;

    //Print the first line in pixel values

    @if $support-for-ie {

        #{$property}: $px-values;

    }

    //if there is only one (numeric) value, return the property/value line for it.

    @if type-of($px-values) == “number”{

        #{$property}: $px-values / $baseline-rem;

    }

    @else {

        //Create an empty list that we can dump values into

        $rem-values:();

        @each $value in $px-values{

            // If the value is zero or not a number, return it

            @if $value == 0 or type-of($value) != “number”{

                $rem-values: append($rem-values, $value / $baseline-rem);

            }

        }

        // Return the property and its list of converted values

        #{$property}: $rem-values;

    }

}

PostCSS(px2rem)