html - 使用媒体查询的响应式网页-6ren

html - 使用媒体查询的响应式网页

转载作者：行者123 更新时间：2023-11-28 01:27:42

27

4

您好，我已经使用 HTML 和 CSS 创建了一个登录页面，但它不适合各种设备，即；没有响应。我怎样才能使用媒体查询使其响应。请提出任何解决方案。

 <html >
   <head>
    <meta charset="UTF-8">
   <title>Log-in</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
        <div class="login-card">
            <h1>Login</h1><br>
  <form>
      <input type="text" name="user" placeholder="Name">
      <input type="text" name="number" placeholder="Mobile Number">
      <input type="submit" name="register" class="login login-register" value="Register">    
 </form>

      </div>
      </div> 

 </body>
</html>

这是我的 CSS

 body {
       background: url() no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      font-family: 'Roboto', sans-serif;
      }

.login-card {
     padding: 2px;
     width: 100%;
     background-color: #DCDCDC;
     margin: 0 auto 10px;
     border-radius: 1px 3px 2px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     overflow: hidden;
            }

.login-card h1 {
     font-weight: 100;
     text-align: center;
     font-size: 2.3em;
     }

.login-card input[type=submit] {
     width: 100%;
     display: block;
     margin-bottom: 10px;
     position: relative;
      }

 .login-card input[type=text], input[type=name] {
     height: 44px;
     font-size: 16px;
     width: 100%;
     margin-bottom: 10px;
    -webkit-appearance: none;
     background: #fff;
     border: 1px solid #d9d9d9;
     border-top: 1px solid #c0c0c0;
    /* border-radius: 2px; */
     padding: 0 8px;
     box-sizing: border-box;
    -moz-box-sizing: border-box;
     border-radius:15px;
     }

  .login-card input[type=text]:hover, input[type=name]:hover {
     border: 1px solid #b9b9b9;
     border-top: 1px solid #a0a0a0;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     }

   .login {
     text-align:center;
     font-size: 14px;
     font-family: 'Arial', sans-serif;
     font-weight: 700;
     height: 36px;
     padding: 0 8px;
     /* border-radius: 3px; */
     /* -webkit-user-select: none;
     user-select: none; */
     }

    .login-register {
     /* border: 1px solid #3079ed; */
     border: 0px;
     border-radius:20px;
     color: #fff;
     text-shadow: 0 1px rgba(0,0,0,0.1); 
     background-color: #4d90fe;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,                  from(#4d90fe), to(#4787ed)); */
      }

 .login-register:hover {
     /* border: 1px solid #2f5bb7; */
     border: 0px;
     text-shadow: 0 1px rgba(0,0,0,0.3);
     background-color: #357ae8;
     /* background-image: -webkit-gradient(linear, 0 0, 0 100%,    from(#4d90fe), to(#357ae8)); */
     }

最佳答案

为移动浏览器使用meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

关于html - 使用媒体查询的响应式网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31443878/

27

4

0

文章推荐： html - 创建响应式倾斜 Angular div 背景

文章推荐： javascript - 在 jQuery 中切换 wordpress 中的事件和非事件 div

文章推荐： javascript - 在模态对话框顶部显示元素

Mysql 查询 JOIN 查询
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。我的查询需要显示值和选项的名称，而
查询
在mysql中，如何计算一行中的非空单元格？我只想计算某些列之间的单元格，比如第 3-10 列之间的单元格。不是所有的列...同样，仅在该行中。最佳答案如果你想这样做，只能在 sql 中使用名称而
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
elasticsearch - 在Elasticsearch查询中没有为[查询]注册的[查询]
我正在为版本7.6进行Elasticsearch查询我的查询是这样的: { "query": { "bool": { "should": [ {
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
php - Mysql WHERE NOT EXISTS(查询)OR(查询)
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确？ SELECT * FROM employees e WHERE NOT EXISTS (
javascript - 查询。为表中的每一行发送 ajax 查询
我找到了很多关于我的问题的答案，但问题没有解决我有表格，有数据，例如: Data 1 Data 2 Data 3
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
Android SQLite 查询(我想解析一般的 SQL 查询)
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
mysql 查询 - 为一个巨大的表优化现有的 MAX-MIN 查询
我有一个或多或少有效的查询(关于结果)，但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
SQL 查询 - 将 NULL 结果添加到 SELECT 查询
这是我第一次使用 Stack Overflow，所以我希望我以正确的方式提出这个问题。我有 2 个 SQL 查询，我正在尝试比较和识别缺失值，尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
sql - 什么是动态 SQL 查询？何时需要使用动态 SQL 查询？
什么是动态 SQL 查询？何时需要使用动态 SQL 查询？我使用的是 SQL Server 2005。最佳答案这里有几篇文章: Introduction to Dynamic SQL Dynami
php - 在另一个 mysql 查询 while 循环中调用 mysql 查询
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
java - MySQL 查询 "select top 5"查询
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
c# - Entity Framework 查询 ToString 不会产生 SQL 查询
通过我的研究，我发现至少从 EF 4.1 开始，EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上，这对我来说非常有用，使用 Entity Framework 5 和 6。但
MySQL 查询(或 Doctrine 1.2 查询)- 从连接表和过滤器中获取最新项目
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人，仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人表格结构如下: 一个联系人可
php - 如何在执行另一个 SQL 查询 x 分钟后执行一个 SQL 查询？
如何让我输入数据库的信息在输入数据 5 分钟后自行更新？假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
database - 如何在 N1QL 查询(Couchbase 查询)中使用 LENGTH() 字符串函数
我正在尝试搜索正好是 4 位数字的 ID，我知道我需要使用 LENGTH() 字符串函数，但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
php - 将 SQL 查询 (+JOIN) 转换为 Symfony Propel 查询
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (

首页

博学

6Ren·AI

商城

html - 使用媒体查询的响应式网页