@import url(mobiles.css) screen and (width <= 640px);
@import url(escritorio.css) screen and (width > 640px);
@import url(para_imprimir.css) print;
在 CSS 中有条件地应用样式（我的最爱）
.clase {
// propiedades comunes a todos los medios aqui.
}
@media screen and (width <= 640px) {
.clase {
// propiedades para mobiles aqui.
}
}
@media screen and (width > 640px) {
.clase {
// propiedades de escritorio aqui
}
}
@media print {
.clase {
// propiedades impresora aqui.
}
}
还有其他变量可以通过测试来决定使用哪些样式，例如屏幕方向：
@media (orientation:portrait) {
// el celular o tableta esta en modo retrato
}
@media (orientation:landscape) {
// el celular o tableta esta apaisado
}
<body>
<div class="row">
<div class="col-1 menu">
<ul>
<li>El vuelo</li>
<li>La ciudad</li>
<li>La isla</li>
</ul>
</div>
<div class="col-2">
<h1>La ciudad</h1>
<p>texto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplo</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>QUE?</h2>
<p>texto de ejemplo</p>
<h2>DONDE?</h2>
<p>texto de ejemplo</p>
<h2>COMO?</h2>
<p>texto de ejemplo</p>
</div>
</div>
</div>
<div class="footer">
<p>Para ver como funciona el ejemplo cambia el tamaño del explorador o del area de resultado.</p>
</div>
</body>
对于缩放问题，您必须添加一个元标记来指示视口的值。
因此，例如，指示移动浏览器的宽度等于设备屏幕本身的宽度。
您可以在 MDN 上获得有关此元标记的更多信息。
但确实没有简单的方法可以做到这一点。这是因为它取决于很多事情，主要取决于您网站的构建方式。
响应式设计
如今，由于分辨率多种多样，理想的选择是使用不同版本的 Web，或者使用响应式设计（响应式 Web 设计）。
这些类型的设计（通常）基于流动设计，然后通过media-queries在 CSS 中指示设计应如何根据屏幕大小表现。
一个非常简单的例子是，在分辨率为
1024*768四列的情况下，会看到分辨率为320*480一的分辨率。使用媒体查询
媒体查询是 CSS 必须测试用户代理和显示文档的设备的某些方面的机制。这包括屏幕的尺寸，但您也可以判断它是否是打印机，这非常有用。
每个媒体查询都是一个可以为真或假的逻辑表达式（类似于 IF）。
有3种使用它们的方法：
通过“链接”元素的“媒体”属性，即为
.css页面的每个“变体”使用不同的文件。通过将更多样式导入到一个 CSS 文件中，就像以前一样，您可以为每个变体使用不同的 CSS 文件。
在 CSS 中有条件地应用样式（我的最爱）
还有其他变量可以通过测试来决定使用哪些样式，例如屏幕方向：
我建议您阅读媒体查询草稿，了解您可以使用哪些其他选项。
好吧，虽然有人说这不容易，但我将 Bootstrap 用于大型 Web 应用程序，并用 CSS3 对其进行补充。
现在，如果您的应用程序很小且格式良好，带有几个
@media改变比例的标签，您将拥有足够的：首先为您的 html 定义一个包含您需要的列的容器，这些将是响应式的，并且里面的元素必须是相对位置和大小与百分比，永远不要使用固定像素！
然后定义标准列的大小，中屏的和移动的（假设大3列，中间2+1，移动3行。
瞧，为了清楚起见，请查看fiddle 上的这个实时示例并调整屏幕大小以查看根据大小创建的 3 个布局。
注意：我在示例中添加了一个额外的页脚以提供信息。
Bootstrap无疑是让你的页面响应式的一个很好的选择，它非常好用，你可以在“纯 html”（没有框架）中使用它，它有很好的文档，一个庞大的社区，它的通用方案很容易了解和使用。
真的没有一种简单的方法可以使用现成的网页自动完成。您需要按照自适应设计（或众所周知的响应式设计）进行操作。
基本上，您将不得不使用CSS 媒体查询，其中screen是桌面屏幕的媒体类型，而手持设备则是移动设备的媒体类型。
对于手机来说，事情看起来像这样，例如：
所以你已经在桌面上使用的那个：
有关更多信息，我在这里为您提供了一些来自Google和Mozilla的西班牙语参考资料。
我想在这里补充一下
Foundation Zurb，在它的第 6 版中。它是完全响应式的，有许多添加、网格设计、许多javascript移动功能插件，它完全专注于响应性。我能告诉你什么，令人惊讶的是，它正在实施许多已经成为时尚的技术，以及其他新的技术。它有相当多的模态库。
它也已经有一个 package
npm和bowerforcli，简单的预先设计的模板，如果你想要一些基本的或完整的，用于繁重的工作，配置文件为gulporgrunt，它会丢失webpack，编译的包sass和js，等等。我现在要自己实现它，但这次是认真的，
sass只修改我需要的东西，只添加必要的模块，这不仅会使其响应迅速，而且更轻。我还会谈到像 Bootstrap 这样的框架，我会谈到在 CSS 中使用
widthymax-width和百分比值以及使用媒体查询。我想添加到其他答案的唯一一件事是使用移动优先方法。
特别是，更喜欢
@media (min-width: )而不是@media (max-width: )因为主要风格是针对较小的设备，而不是相反：应该优先于
对不起，我只会说意大利语，我用谷歌翻译:)