很多刚入行的兄弟或者小企业主，拿着Dreamweaver这个老古董问怎么搞响应式。这篇文直接告诉你，用DW做自适应有多痛苦，以及为什么我现在劝你别这么干，但如果你非要用，这里有几条保命建议。
咱们先说个扎心的事实。Dreamweaver这软件，早在十年前就是主流了。现在？它更像是一个带代码提示的记事本。你想用它做现在这种满屏都是手机、平板、PC的自适应页面，就像开着一辆拖拉机去跑F1赛道。不是不能跑，是累得半死还跑不快。
我有个客户，去年非要用DW写个企业官网。预算卡得死，就给了三千块。我接了，心里骂娘，手上还得敲代码。为什么？因为客户觉得DW是Adobe家的，高大上。结果呢？为了搞那个所谓的“自适应”，我在代码里堆了一堆媒体查询（Media Queries）。
你看，DW自带的可视化设计视图，在HTML5和CSS3面前基本是个摆设。你拖个盒子进去，它给你生成的代码乱得像鸡窝。你想让它手机端显示两列，PC端显示三列，在DW里点鼠标？别做梦了。你得手写CSS。
这就涉及到核心问题：dw 如何做自适应网站。
第一，放弃可视化，回归代码。别信那些“拖拽生成响应式”的鬼话。在DW里，直接切换到代码视图。新建一个CSS文件，别在HTML里写样式，那样后期维护能让你想砸电脑。
第二，理解流式布局。这是自适应的灵魂。别用固定的像素宽度，比如 width: 980px。要用百分比，或者flex布局。我在给客户做那个三千块的案子时，用了简单的flex-wrap属性。这样不管屏幕多窄，元素会自动换行。虽然丑了点，但好歹能看。
第三，媒体查询是救命稻草。你得在CSS里写 @media (max-width: 768px) { ... } 这样的规则。当屏幕小于768像素时，字体变小，图片缩小，侧边栏隐藏。这一步，DW帮不了你，只能靠你脑子。我当时的做法是，先写PC端的样式，然后针对手机端单独调整。这很笨，但很有效。
这里有个大坑，很多人不知道。DW的预览功能，在浏览器兼容性上很拉胯。你在DW里看着好好的，一到Chrome或者Safari上，布局就崩了。所以，别在DW里预览，直接按F12在浏览器里调试。这才是正解。
再说个真实案例。有个做建材的客户，非要加个“一键自适应”的功能。我告诉他，没有这种功能，只有手动适配。他不信，找了个外包，结果外包用DW生了一堆冗余代码，页面加载速度慢得像个蜗牛。最后客户找我救火，我花了三天时间，把那些DW生成的垃圾代码全删了，重写了一遍CSS。
所以，如果你非要问dw 如何做自适应网站，我的回答是：把它当成一个纯粹的文本编辑器用。别指望它的智能提示能帮你搞定响应式逻辑。
现在的趋势是，要么用Bootstrap这种框架，要么直接用WordPress配合响应式主题。用DW手写自适应，除非你闲得慌，或者想通过折磨自己来证明技术实力。
当然，如果你必须用，记住几个原则。
1. 图片要用max-width: 100%; 这样图片才不会撑破容器。
2. 字体单位用rem或em，别用px，这样缩放更自然。
3. 测试！测试！测试！在Chrome、Firefox、Safari，还有真机上都看看。
最后说一句，技术是为了服务业务，不是为了炫技。如果你的项目预算够，别用DW。如果预算不够，那就沉下心，一行一行敲代码。这过程很痛苦，但敲出来的代码，干净、利落，没有那些臃肿的标签。
这行干久了，你会发现，工具只是工具。真正决定网站质量的，是你脑子里的逻辑，和你对待代码的态度。别偷懒，别信捷径。在自适应这个坑里，没有捷径可走。
希望这篇文能帮你省下不少冤枉钱和时间。如果还有不懂的，评论区见，我尽量回。毕竟，谁还没个用DW写代码的傻逼过去呢？
