新适配方案，媒体查询+calc计算，适用于集pc端适配+兼容移动端于一身的项目

项目简介

 最近开发了一个项目需要做pc端适配且还要兼容移动端，开发的时候产品经理没有特别明确项目需求。当时就按照pc端做了，做完才告诉我需要兼容移动端。。兼容完移动端后由于pc端没有适配，电脑屏幕大小不一样看着项目怪怪的，又需要做pc端适配，具体我是怎么一步步实现的呢，容我慢慢道来：

pc端兼容移动端

pc端兼容移动端最好的方法就是用媒体查询啦，原理是屏幕小于768以下就是移动端，用媒体查询可以判断出来，把移动端的样式放到小于768的媒体查询即可

适配pc端方案

我的思路是把样式换成动态计算，当屏幕宽度不一样时，css计算出来的样式值也不一样，达到兼容各种屏幕宽度的效果。这个是某个数据大屏显示项目的做法给我的启发，他们是把样式换成一个变量乘以一个数的方式做的适配效果。我跟他们的做法原理差不多，计算的方式可能不太一样。我把pc端项目写完后把所有的带单位的值都换一下就有适配效果，例如width:450px，换成 width: calc(100vw / var(--screen) * 450);就可以适应各种屏幕啦，原理会在下面讲到

适配实现原理

为什么换成width: calc(100vw / var(--screen) * 450);就能适配各种屏幕呢？--screen我们设置为1600px,。

假设我们的屏幕宽度设为1600px ，那么就是1600px / 1600px * 450计算出来的结果就是刚好是450px。

如果屏幕宽度是1400px,1400px / 1600px * 450结果是393.75px，1400和1600的屏幕计算出来的宽度相差450-393.75=56.25。

如果屏幕宽度是1800px,1800px / 1600px * 450结果是506.25px，1800和1600的屏幕计算出来的宽度相差506.25-393.75=56.25。

结果显而易见，屏幕比1600px小200px,算出来的宽度会少56.25px，比1600px大200px，算出来的宽度会多56.25px。这样就达到了我们的效果，根据屏幕宽度动态计算css样式值达到适配各种屏幕！

设置--screen变量

还要在js设置一下--screen这个变量，具体设置方法见下图，我的设置为1600px是因为我的项目版心是1600px，当我们改完后觉得不合适还可以把这个的变量值改一下，页面上所有的样式都会跟着变大变小，调整到合适的值为止。

样式分离

我这里用了两个sytle标签，一个用来写pc端没有适配的样式+移动端适配的样式，一个用来写pc端适配的样式，其实分成3个更好，我就懒得改了。我的pc端适配的样式放在了@media (min-width: 768px) and (max-width: 1400px)当中，这样就不会影响到移动端的样式