真的受够了网上那些吹捧各种新框架、新工具的软文。今天咱们关起门来聊点实在的。很多人一提到Dreamweaver，脑子里蹦出来的就是“过时”、“老旧”、“只会拖拽”、“做出来的网站丑得没法看”。哼，持这种观点的人，多半是连HTML5和CSS3的基本盒模型都没搞明白，或者是被那些只会复制粘贴教程的培训机构给洗脑了。
我要明确表态：DW可以做移动端网站，而且如果你懂代码，它比某些臃肿的可视化编辑器强得多。问题不在于工具，在于用工具的人脑子里有没有“响应式”这个概念。
我见过太多人拿着DW，还在用表格布局，还在写固定的像素宽度。然后跑来问我：“为什么我的网站在手机上显示不全？” 蠢不蠢？你自己不写媒体查询（Media Queries），不写弹性盒子（Flexbox），指望软件自动给你变魔术吗？软件只是个写字板，笔在你手里，你写出来的字歪歪扭扭，怪笔不好用？
想用手机浏览器打开你的DW作品也能舒服浏览？别整那些虚的，直接上干货。
第一步，彻底扔掉“固定宽度”的执念。
新建一个HTML文件，在
标签里必须加上这一行：这行代码是移动端适配的命根子。不加这行，手机浏览器会默认按980像素的宽度去渲染，然后缩成一团给你看，你骂街都没用。加上它，网页宽度就会自动跟随设备屏幕宽度。这一步，90%的新手都懒得做，或者根本不知道这玩意儿是干嘛的。
第二步，用CSS3的媒体查询（Media Queries）来“整容”。
别再用像素（px）死磕了，多用百分比（%）或者rem。比如你的侧边栏在电脑上占30%，在手机上就该占100%。
在CSS文件里写上：
@media screen and (max-width: 768px) {
.sidebar {
display: none; / 或者改成 flex-direction: column; /
}
.main-content {
width: 100%;
}
}
这段代码的意思是，当屏幕宽度小于768像素时，侧边栏隐藏，主内容占满全屏。这就是响应式的核心。DW的代码编辑窗口其实挺好用，智能提示虽然有时候抽风，但基本语法检查还是有的。你要学会手动写这些CSS，而不是依赖DW自带的属性面板，那个面板对现代CSS3的支持简直是一坨屎。
第三步，图片必须自适应。
很多DW老用户喜欢直接插入图片，设置宽和高。在移动端，这会导致图片溢出屏幕。
给所有img标签加个样式：
img {
max-width: 100%;
height: auto;
}
就这么简单。图片宽度最大不超过父容器，高度自动缩放。这样不管手机屏幕多小，图片都不会撑破布局。
第四步，测试，测试，再测试。
DW自带的“实时视图”有时候会骗人，因为它模拟的是桌面浏览器。一定要真机测试。把文件传到服务器，或者用本地服务器跑起来，然后用手机扫二维码看效果。你会发现，很多在电脑上看着挺美的布局，在手机上全是重叠的。这时候别慌，回去改CSS，调整padding和margin。
说实话，现在用DW做项目的人确实少了，但这不代表它没价值。对于熟悉HTML/CSS的人来说，DW就是一个高效的代码编辑器。它支持多窗口编辑，支持代码折叠，这些功能在写大量CSS时非常爽。
别再抱怨工具了。如果你连基本的响应式布局都搞不定，换再贵的IDE也没用。DW可以做移动端网站，前提是你要懂Web标准，要懂移动端交互逻辑。那些只会拖拽组件的人，做出来的东西注定是垃圾，无论用什么工具。
我讨厌那种“工具决定论”的废话。技术人的尊严，在于你能驾驭工具，而不是被工具绑架。拿起你的DW，打开代码视图，开始写真正的响应式代码吧。别在可视化界面里浪费时间了，那玩意儿除了让你产生“我在做网站”的错觉，毫无用处。
记住，代码是写给人看的，顺便给机器执行。在移动端，用户体验就是天。你的网站在手机上能不能流畅滑动，字体能不能看清，按钮能不能点中，全看你的CSS写得漂不漂亮。
别懒，别怕麻烦。移动端适配就是体力活，也是技术活。你付出的每一行媒体查询代码，都是在为用户的指尖体验买单。这才是做网站的意义，而不是为了炫技。
本文关键词：dw可以做移动端网站
