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，其中 - 最基本 - 如下

v = 0.5

或者，如果您想允许移动浏览器进行缩放，您可以将<meta name="viewport" content="width=device-width">属性展开为content
编辑：在今天的世界中，移动设备的像素数比许多旧电脑的像素数都多。如果您只是将媒体查询基于像素，那么几乎无法区分移动设备和桌面设备。此标记告诉浏览器使用像素密度除法魔法将CSS认为具有的像素数量缩放到更合理的数量。

2）将条件media queries添加到样式表中。

的内容

content="width=device-width, initial-scale=1.0, user-scalable=yes"

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

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

如何使用CSS @media查询使这个元素响应？

1 个答案: