javascript - 如何使用 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 =是”
编辑:在当今世界，移动设备的像素比许多老式计算机都多。如果您只是将媒体查询基于像素，那么几乎没有办法区分移动设备和桌面设备。此标记告诉浏览器使用像素密度除法魔法将 CSS 认为它必须具有的像素数量缩放到更合理的数量。

1. 添加条件 media queries到你的样式表。类似的东西

   @media(最大宽度:600px){ #wego-搜索框{ 宽度:100%； } }

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

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