媒体查询+scss+flex布局移动端开发

81 阅读 0 评论 54 点赞

我是靠谱客的博主迷人心锁，最近开发中收集的这篇文章主要介绍媒体查询+scss+flex布局移动端开发，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

rem适配方案

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

技术方案：scss+rem+媒体查询

首先，我们设置再不同屏幕尺寸下 html字体的大小。$no: 15;
为其建立单独的scss文件存储。

// 我们此次定义的划分的份数 为 15
$no: 15;
// 设置常见的屏幕尺寸 修改里面的html文字大小
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / $no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / $no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / $no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / $no;
    }
}
// 红米手机 oppo 393
@media only screen and (width:393px) {
    html {
        font-size: 393px / $no;
    }
}
// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / $no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / $no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / $no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / $no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / $no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / $no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / $no;
    }
}
// 1140
@media screen and (min-width: 1140px) {
    html {
        font-size: 1140px / $no;
    }
}

然后我们在要页面外链的scss的样式文件中这样引用
@import "文件名(带不带后缀都可以注意路径)";
页面应用的scss文件，定义html初始文字大小，这样我们的计算公式就是：

//我们测量的页面元素的px / html 字体大小 $baseFont

// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
// search-content
$baseFont: 50;
// 自定义函数进行计算
@function remNum($args) {
    @return $args / $baseFont;
}

用scss的函数封装了一个功能函数传入实际测量的px即可的出rem值；

<!--使用该方法时传入的数值以rem为单位 
	scss 除法运算时 结果单位跟除数单位有关
-->
.container{
    width: 100%;height: auto;
    background:#191d22 url("http://assets.kgc.cn/upload/image/20200521/1590024910682024.png"); 
    background-size: 100% auto;
    width: remNum(750rem);
    padding-bottom: remNum(203rem);
}