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

How to make this element to be responsive using CSS @media queries?

本文关键字：元素 响应 查询 何使用 CSS @media      更新时间：2023-09-26

我有一个项目，并试图使盒子响应时被视为在较小的屏幕上。我尝试了使用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?非常感谢，非常感谢;)

不知道你已经尝试过什么，设计手机的标准程序是:

  1. 添加viewport meta标签，最基本的是如下所示

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

  • 在样式表中添加条件媒体查询。

    之类的东西@media (max-width: 600px) {# wego-searchbox {宽度:100%;｝｝

    • 通常就足够了。请注意，默认情况下，媒体查询不会覆盖其他CSS规则，但只有当它们具有更大的专用性或同等的专用性，但媒体查询被放置在第一条规则之后。

    在这个问题上有一些有用的答案，关于媒体查询的一般大小应该是什么，我发现这在做响应式设计时非常有用。
    相关文章：