工作网站的响应式设计

Question

我是初学者，只是前端的网络开发人员。有时候我需要让现有的工作网站做出回应。我使用浏览器扩展程序（Styler for Chrome），向我显示我可以插入样式的窗口，该样式将应用于页面。但它看起来有点困难（需要在我的文本编辑器中编写代码，将其复制到扩展表单，而不是再次，一次又一次......）。有没有办法，将我的本地样式表集成到现有网站，只在我的编辑器中进行更改并自动重新加载页面，就像使用本地页面一样？我在LiveReload网站上找到了一些东西 - http://feedback.livereload.com/knowledgebase/articles/86220-preview-css-changes-against-a-live-site-then-uplo，但我不能使用他们的应用程序，因为我在Windows上（LiveReload仍处于测试阶段）。如果有人使用类似的，你能解释一下如何让它工作吗？感谢。

Answer 1

在到期的过程中，我找到了简单的解决方案：

1. 需要安装Chrome扩展程序（CSS Inject）。
2. 在您的机器上运行web-server，它将托管您的css文件以进行注入（CSS Inject仅适用于HTTP）并将其插入到CSS Inject中，在我的情况下它看起来像 - http：// adapt / css / style。 CSS
3. 需要livereload服务器。我正在使用node.js和这个包https://www.npmjs.com/package/livereload。
4. 在您的网站根目录中创建文件（例如server.js）

5. 将此代码粘贴到server.js：

   var livereload = require（'livereload'）， server = livereload.createServer（）;

   server.watch（__ dirname +“/ css”）; console.log（'等待更改'）;

6. 转到您的实时网站并激活CSS Inject。

7. 运行节点./server.js
8. 就是这样。您现在可以修改您的样式，并在真实网站上查看更改。

如果有人知道更好的解决方案（使用此软件包中的API https://www.npmjs.com/package/livereload#api-options，特别是 overrideURL 选项）或者更好地了解node.js并了解如何实现它，请发布您的解决方案在这里，我将不胜感激。