33.我的页面自适应套路总结（下）

“点赞收藏加关注，你也能住大别墅”

一、PC端适配方案

开发之前在vscode中安装类似px to rem的插件、准备flexible.js文件。
px to rem的插件可以在编写代码时安装配置自动把px转化成rem。
flexible.js帮助我们在页面渲染时实现自适应。
准备好后，在px to rem的插件中进行配置如下：

基准font-size就是html中的font-size，由基准宽度1280/10得到。

开始编写代码：
在pc.css文件中进行如下编辑

/* PC端考虑适配方案为：以1280为基准，换分为10份
   PC屏幕常见宽度如下：1024、1100、1280、1366、1440、1680、1920
*/
html{
    font-size: 128px;
}
div{
    height: .2344rem;
    width: .2344rem;
    font-size: .4688rem;
    background-color: aqua;
}

二、移动端适配方案

这里要注意一点，所谓的分开适配，就是要先开发pc端或者移动动端，一端开发完毕之后，再开发另一端，不能混合开发，因为需要对转换rem的插件进行不同的配置。
开发移动端之前对px to rem 的插件进行配置如下：


开始编写phone.css文件如下：

/* 
phone端考虑适配方案为：以750为基准，换分为10份,这也是较为常见的移动端适配方案
*/

html{
    font-size:75px
}

div{
    height: .4rem;
    width: .4rem;
    background-color: brown;
}

三、总结

我上传了这个案例，里面包含flexible.js文件，大家可以下载使用。
分开适配的好处就是可以专心开发一端，测试一端，完事之后再弄另一端。当然适配方案不可能满足所有设备的需求，这个再具体业务中要根据客户的不同需要做出调整。