如何使用 CSS @media 查询使该元素具有响应性？

Question

我有一个项目，并试图让该框在小屏幕上查看时具有响应性。我使用 CSS 尝试了 @media 查询，但没有任何效果。以下是我尝试将其转换为响应式元素的元素代码：

    <hr />

<h3 style="text-align: center;"><span style="text-decoration: underline;">Shortlink Generator:</span></h3>
<meta charset="utf-8">
<script charset="UTF-8" type="text/javascript">
window.SL_GENERATE = window.SL_GENERATE || {};
window.SL_GENERATE = {
  "ts_code": "acx",
  "width": "width:970px",
  "ui-template": "ui-resizable sl-green sl-ico-green",
  "Button": "Search",
  "whiteLabel": "0",
  "locale": "en",
  "subid": "sb_wp",
  "logo": "block",
  "radius": "1",
  "typeBoxDisplay": "block",
  "box": {
    "selected": "sl-selected",
    "textGenerate": "Generate",
    "textLong": "Long",
    "action": "http://www.goo.gl/",
    "target": "_blank",
    "textURL": "URL",
    "textLink": "Link",
    "textSubmit": "Submit",
    "textLength": "Length",
    "quote-text": "Generate Shortlink",
    "defLocation": "Kalimantan"
  },
}
</script>
<div class="resources-content">
<div id="wego-searchbox"></div>
</div>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="http://www.wan.travel/assets/app/datepicker.css">
<link rel="stylesheet" type="text/css" href="http://www.wan.travel/assets/app/searchbox.css">
<script charset="UTF-8" src="http://www.wan.travel/assets/wan/searchbox.js?body=1"></script>

<hr />

谁能帮助我使用 CSS 将该代码转换为响应式元素？真的很感激，非常感谢；）

Answer 1

在不知道您尝试过什么的情况下，为移动设备设计的标准过程是

1. 添加viewport meta tag，最基本的内容如下

或者，如果您想允许移动浏览器缩放，您可以将content 属性扩展为content="width=device-width, initial-scale=1.0, user-scalable=yes"
编辑： 在当今世界，移动设备的像素比许多设备都多旧电脑可以。如果您只是将媒体查询基于像素，那么几乎没有办法区分移动设备和桌面设备。这个标签告诉浏览器使用像素密度除法魔法将 CSS 认为它必须的像素数量缩放到更合理的数量。

1. 将条件media queries 添加到您的样式表中。类似于

   @media（最大宽度：600px）{ #wego-搜索框{ 宽度：100%； } }

通常就足够了。请注意，默认情况下，媒体查询不会覆盖其他 CSS 规则，但前提是它们具有更大的specificity 或相同的特异性，但媒体查询放在第一条规则之后。

在this SO question 上有一些有用的答案，关于媒体查询的一般大小应该是多少，我发现在进行响应式设计时我自己非常有用。