“点赞收藏加关注,你也能住大别墅”
一、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文件,大家可以下载使用。
分开适配的好处就是可以专心开发一端,测试一端,完事之后再弄另一端。当然适配方案不可能满足所有设备的需求,这个再具体业务中要根据客户的不同需要做出调整。