移动/PC端的一些适配方案_rpx 针对pc-CSDN博客

本文链接：https://blog.csdn.net/qq_26769677/article/details/106798947

一.多种屏幕(响应式）

响应式是一种在多种设备(比如pc端移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段。响应式包含了移动端适配，也可以使移动端不同分辨率展现不同样式。移动端适配则相对精准，是指仅针对移动端的适配方案。

1.百分数

最原始我们可以使用百分数来让界面达到适配效果。

*,html{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
header{
    width: 100%;
    height: 10%;
    background-color: #eee;
}
.info{
    width:80%;
    height: 100%;
    background-color: #fff;
}

<body>
    <header>
        <div class="info">
            this is info
        </div>
    </header>
</body>

使用百分数计算起来有点麻烦，首先需要在html、body上宽高都设置100%，然后子元素根据需要设置宽度高度，需要元素自适应的时候就用上百分数计算(相对父元素宽高计算)。
上述header相对body的高度设为10%，info在header元素里面，想要设置与header一样高度的元素，高度就设置100%。

缺点：
1).不能字体大小自适应，需手动计算
2).百分数设置麻烦尤其是高度
3).奇数分割容器得不到精确宽度

2.Media媒体查询

媒体查询可以针对不同屏幕尺寸设置不同的样式。

@media screen and (min-width: 375px) {
    .container{
        width: 100%;
        height: 100px;
        background-color: bisque;
    }
}
@media screen and (max-width: 375px) {
    .container{
        width: 50%;
        height: 100px;
        background-color: burlywood;
    }
}

<div class="container">
</div>

上述使用媒体查询，在屏幕分辨率宽大于375px的时候container的宽度为100%，当屏幕宽度小于375px时container宽度为50%。还可以将尺寸设置得更细致。

一般media screen 与rem配合使用效果更加，因为根据媒体查询划分屏幕区间的话有点粗糙，分辨率区间与区间之间可能跳度过大，而且需要在每个区间里单独设置样式，样式繁冗。

@media screen and (min-width: 375px) {
    html{
        font-size: 25px;
    }
}
@media screen and (max-width: 375px) {
    html{
        font-size: 15px;
    }
}
.container{
    width: 16rem;
    height: 100px;
    background-color: bisque;
}

上述在不同分辨率下设置字体后，屏幕宽度改变，container的宽度、字体也会跟着改变，只需要写一遍container样式就可以在分辨率改变的时候改变样式。

html的font-size一般需要根据设备分辨率来动态计算。

缺点：只用media：每个分辨率区间都要单独写样式，麻烦、不利于维护、样式冗余。与rem一起用：需要手动计算字体大小。

3.绝对定位

body{
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom:0;
}
.container{
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom:0;
}
.top-bar{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: calc(100% - 50px);
    background-color: #eee;
}
.info{
    width:50px;
    position: absolute;
    top: 0;
    bottom:0;
    background-color: #ddd;
}
.right-info{
    position: absolute;
    top: 0;
    bottom:0;
    left: 50px;
    right: 0;
    background-color: #fff;
}
.content{
    position: absolute;
    top:50px;
    bottom:0;
    width: 100%;
    background-color: antiquewhite;
}

<div class="container">
    <div class="top-bar">
        <div class="info">
            info
        </div>
        <div class="right-info">
            right info
        </div>
    </div>
    <div class="content">

    </div>
</div>

绝对定位需要先固定一个宽/高度，然后其它元素根据这个元素的宽/高再计算。像一些左中右布局，左右两边宽度固定，中间不设置宽度，就能让中间区域达到响应的效果。

可以与百分数一起使用能够达到更好的效果。

缺点：
1).不能字体大小自适应，需手动计算
2).计算麻烦
3).视觉体验并不友好

相关还有display:flex、table-cell，(display: grid; grid-template-columns: Xpx Xpx Xpx; grid-template-rows: Xpx Xpx Xpx)

二.移动端常用适配

4.rem

rem需要给html标签元素设置字体大小，字体设置多少就会根据字体大小来变换尺寸。

document.documentElement.style.fontSize = document.documentElement.clientWidth / (设计稿宽/100) + 'px';

在给字体设置rem的时候，在不同屏幕下绝对尺寸不一致，最好是独立设置

@media screen and (min-width: 375px) and (max-width: 640px) {
    .div{
        font-size: 15px;
    }
}
@media screen and (max-width: 375px) {
    .div{
        font-size: 14px;
    }
}

与resize方法配合使用可以在屏幕宽度变化时动态改变字体大小而不是手动刷新.

window.addEventListener('resize', ()=>{
    document.documentElement.style.fontSize = document.documentElement.clientWidth / (设计稿宽/100) + 'px';
});

5.vw

安装：
npm i --save-dev postcss-px-to-viewport

新建：postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        'postcss-px-to-viewport': {
            viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
            viewportUnit: "vm",   //指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false     // 允许在媒体查询中转换`px`
         }
    }
};

@keyframes 和media查询里的px默认是不转化的，设置mediaQuery： true则媒体查询里也会转换px
@keyframes可以暂时手动填写vw单位的转化结果

viewportUnit也可以设置成vh, vmin, vmax，但是需要计算字体大小。

postcss-px-to-viewport 是借助postcss工具编写的postcss插件：

module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
//。。。
}

通过这个函数计算单位：

function createPxReplace(opts, viewportUnit, viewportSize) {
  return function (m, $1) {
    if (!$1) return m;
    var pixels = parseFloat($1);
    if (pixels <= opts.minPixelValue) return m;
    var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
    return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
  };
}

vw相对于视口的宽度。视口被均分为100单位的vw
h1 { font-size: 8vw; }
如果视口的宽度是200px，那么上述代码中h1元素的字号将为16px，即(8x200)/100
也就是说将px转换为vw的公式为：16*100/200 <=>16/200*100 <=> 上述createPxReplace方法中的pixels / viewportSize * 100 < => 我们设置的px大小/视窗分辨率(设计稿大小)*100

5.微信rpx

rpx是微信小程序的css单位，可以根据屏幕尺寸适应。
默认375px屏幕宽度下 1rpx = 0.5px

rpx换算px(屏幕宽度/750) ,px换算rpx(750/屏幕宽度)