【.com快译】随着响应式设计的兴起，许多开发者开始回归浏览器内设计思维。这种能够显着提高网站适应性的开发方案虽然有很多优势，但也对开发者现有的设计思路提出了挑战。在今天的文章中，我们将讨论十个重要的技巧，可以帮助您顺利解决基于浏览器内Web开发的问题。1、从基础做起，充分利用网格。抛开现有的风格，建议通过引入所有必要的内容来思考设计方向，因为这样可以使最终的设计更符合你的实际内容。使用基于网格的框架，网站开发时间可以大大减少。此外，它使您的布局看起来更加坚固和紧凑。此外，基于网格的设计思想还可以帮助我们更好地了解我们的网站是如何被浏览的。2.使用高级编辑器如果您倾向于手动编码和开发网站，则需要专业的编辑器来增强您的工作流程。确保您的编辑器具有所有必需的功能。考虑到编辑器选项种类繁多，您需要根据需要仔细筛选。这里给大家初步推荐几个，包括Aloha、Aptana、Netbeans、Coda。3.使用更好的字体在Photoshop中将文本创建为图像时，您可以自由使用自己喜欢的字体，而不必担心兼容性问题。但这种做法会使文本内容不可选择或不可搜索。为了解决这个难题，您可以安装几个可自定义的字体解决方案。在浏览器内进行Web开发时，可以使用@font-face命令。4.给元素添加阴影其实我们不需要Photoshop，我们可以很容易的在Web上实现阴影。CSS3现在得到大多数主流浏览器的支持，并提供大量出色的新功能来帮助您实现您的创造力。Box-Shadow功能可以单独使用CSS为特定项目添加阴影。此外，您还可以调整阴影的长度、宽度、颜色和模糊半径。5.如何实现圆角这是现代CSS的一个重要特征。您可以使用border-radius函数在Firefox和Safari浏览器中添加圆角。有了这种圆形效果，您将为您的网站提供更好的视觉效果。6.如何实现文本阴影在浏览器内设计层面上，为文本添加阴影非常简单。您只需要使用text-shadow功能来调整模糊半径和阴影颜色。此外，您还可以使用此功能实现凸版效果、发光效果和火焰效果。7、如何选择字体我们当然不可能在每个网站都使用相同的字体。您可以使用全面的网络字体库轻松更改字体，并在不同的项目中使用不同的选项。使用Typetester等工具，您可以在浏览器中查看不同的字体和设置（例如对齐方式和字体大小）。设置完成后，它将为您导出CSS代码。8、使用浏览器测试工具值得注意的是，并不是所有的浏览器都能支持浏览器内Web开发，并提供必要的技术方案。因此，您需要花一些时间了解当前浏览器如何显示网站内容，然后选择正确的浏览器进行网站开发。9.建立配色方案使用Photoshop，我们能够轻松地尝试不同的颜色组合。不过web层也提供了大量的配色方案资源，同样可以达到惊人的显示效果。诸如Kuler之类的配色方案提供了一个用于轻松创建漂亮配色方案的界面，还包括各种预先创建且易于搜索的配色方案。您可以根据您正在开发的网站的主题选择最合适的模板。10.如何使用StockArt如果您需要创建快捷按钮、图标或其他您不想自己构建的图像，您可以直接使用现成的StockArt资源。各种StockArt站点目前提供了大量的Web元素，您可以直接在自己的网站中使用这些元素——其中许多根本不需要进一步修改。无需花费大量时间自行构建，您可以使用开箱即用的资源在几分钟内完成工作。如今，浏览器内Web开发已被许多开发人员所接受。而本文所涵盖的技巧，相信也能帮助你在不配合Photoshop的情况下，更轻松地达到网站预期的外观和使用体验。原标题：10In-BrowserWebDevelopmentTips原作者：Prat
