前端屏幕适应 设备适应 @media screen的css样式 rem bootstrap

关于前端的自适应的问题
这个有几种解决思路，比如使用bootstrap框架，或者@media screen 或者使用rem 或者使用百分比来书写。关于框架会比较大，但他对设备的适应真的是无与伦比，要是项目对框架要求不限定的话，那就选bootstrap，如果是适应移动端以手机这类为主的话就要注意单位要选rem，如果是大屏幕的电脑就使用@media screen结合百分比来写代码。

实际使用
我这里目前的两个项目，说一下情况，有一个呢，对设备不要求适应，使用vue，页面也比较大，项目讨论就写死，那就简单的写死。另外一个呢，属于去已经定型的代码里改东西，用vue，页面不够高，在大的电脑屏幕里面会有问题，那这种情况就简单的写一个@media screen来写两套样式。这里要注意后生效的样式要写在后头，不然会覆盖，使用@media screen要在html里面加meta的对应标签。简单点的环境注意这两点就够了，如果是复杂的话请参考楼下连接，这个链接很细，适合找bug，另外找bug的时候，建议不要直接上样式，用个比较容易观察的div和样式来看是否有屏幕适应的效果，如果有效我们再去改你所需要的地方，这样会方便排查问题。
调整屏幕的话，其实也不叫屏幕，是浏览器的窗口大小其实。就直接打开开发模式，然后拖动边框，会提示你当前屏幕大小。

https://blog.csdn.net/u013040887/article/details/79228093