说一下，因为打包到tomcat上修改了项目的一些代码，当要在本地localhost自测时应改回来。
首先我git clone了我add到仓库上的代码，然后删除掉了/dist和/node_modules，然后把vue.config.js先备份到其他地方（自测时不需要这个），修改了根目录文件夹下router.js里面的baseURL，修改了package.json里面的--host 0.0.0.0。
说来惭愧，之前基本上使用的都是开箱即用的响应式布局框架。这次考虑用media query（在我复习前端知识的时候遇到过好多次，没认真研究过），来响应一些基本的分辨率布局。
目前初定的分辨率：
1920x1080，也就是实验室电脑和我自己笔记本的分辨率
1600x900，
1280x720，
1020x768。
先做这四个最基本的，至于手机端先不做。下星期再倒腾。
这里感慨下谷歌浏览器的好用之处（另外，不知道为何实验室的win10系统的谷歌浏览器会被hao123劫持，fine，很气。），fn+F12打开开发者模式，下图中圈小红框的地方，这里可以调整分辨率，预览其他分辨率下的网页布局。
我们自己创建一个自定义格式，先1600x900吧，点击股票预测，就会发现showstock这个界面show这个div有点要超出框了，不好看。另外，logo明显太贴近图，不好看。所以1600x900最主要调整就是showstock框的大小和logo的大小。
@media (max-width:2000px){ 适用于1920x1080}
@media (max-width:1700px){适用于1680x1050,1600x900}
@media (max-width:1500px) and (max-height:1100px) {适用于1440x1050}
@media (max-width:1500px) and (max-height:901px) {适用于1440x900,1360x768,1366x768}
@media (max-width:1300px) and (max-height:1030px){适用于1280x1024}
@media (max-width:1300px) and (max-height:801px){适用于1280x800,1280x768,1280x720,1024x768}
因为使用的是max-width和max-height，也就是宽度或高度不大于xxx，所以要从大到小排列。
也是不容易把基本分辨率都做完了，在以下分辨率下都能够比较正常显示。其实基本上只操作了showstock页面。
这是目前比较原始的一种适应分辨率的方法，之后会再寻找别的简单的方法，例如rem（现在还没能很好的使用）。
———更新—————
以下方法已确认对pc端无用～而后选择了一种禁用快捷键（ctrl+滚轮等）的js方式来防止用户强制缩放…。
另外，我们可以在index.html文件中用meta属性来禁用用户的缩放。
index.html的位置在public里面（之前一直没找到，也是醉了）
语句如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
网友评论