如何使网站在移动设备上响应答案

【问题标题】：How to make website responsive on mobile如何使网站在移动设备上响应
【发布时间】：2018-07-15 22:13:20
【问题描述】：

我的网站在桌面上看起来很棒，但是我无法在移动设备上完美地扩展它。我继续在每个页面上放置元标记，但它仍然不能完美缩放。

谁能帮我解决这个问题？或者也许是一个很好的视频教程？图片已添加，我正在使用响应式应用来帮助我。

另外，我是网络开发的新手，我的网站完美地放在桌面而不是移动应用程序上，这很糟糕吗？大多数 Web 开发人员是否同时格式化桌面和移动应用程序？或者我在最后解决这个问题不是太糟糕了吗？只是想在这里学习最佳实践。

html {
  box-sizing: border-box;
}

*,
*: before,
*: after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  background-image: url();
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

navbar-brand {
  height: 3em;
  width: 3em;
  margin-top: -8px;
  border-radius: 5.0em;
  margin-right: 1em;
  margin-left: -5em;
  margin-bottom: -8px
}

.avatar {
  border-radius: 5em;
  margin-right: .5em;
  margin-left: 1em;
}

.intro {
  display: inline-block;
  width: 100%;
  padding: 65px 0 65px;
  background-color: #2A2332;
  background-size: cover;
  font-size: 1.9em;
  text-align: center;
  color: #FFF;
}

h1 {
  font-weight: medium;
  text-shadow: 5px 5px 10px black;
  position: center;
}

h4 {
  font-size: -.5em;
  position: center;
}

.container {
  margin-top: 1em;
  margin-right: 1em;
}

.bigicon {
  font-size: 35px;
  color: #808080;
}

.input-icon {
  position: absolute;
  left: .5rem;
  top: .7rem;
  /* Keep icon in center of input, regardless of the input height */
}

.btn {
  margin-right: 12em;
}

#message {
  vertical-align: middle;
}

input {
  padding-right: 30px;
}

.form-control {
  text-indent: 2rem;
  width: 75%;
}

.input-wrapper {
  position: relative;
}

@media screen and (min-width: 640px) {}

@media screen and (min-width: 960px) {}

main {
  flex: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>

  <!--Homepage link-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span></button>

    <!--Navbar links-->
    <div class="collapse navbar-collapse text-center" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>

          <!--Social Media Icons-->
          <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

            <li class="nav-item">
              <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" title="Email">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
      </ul>
    </div>
    </div>
  </nav>
  <!--Intro of Contact-->

  <div class="intro">
    <h1>Contact</h1>
    <h4>If you would like to work with me, send me a message!</h4>
  </div>

  <!--Contact Form-->

  <div class="container">
    <div class="row">
      <div class="col-sm-12 mx-auto">
        <div class="well well-sm">
          <form class="form-horizontal" method="post">

            <fieldset>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                    <label for="fname" class="fa fa-user input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                    <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
                    <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-12 text-center mx-auto">
                  <button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


</body>

</html>

【问题讨论】：

目前有2个cmets被删除了，有谁知道这是为什么？我非常感谢阅读每个人的回复。这很有帮助。我希望所有的 cmets 都留下来？
我的是个意外，我重新发布了它，我正试图编辑它哈哈。
谢谢乔尼，哈哈。你的非常详细，想在 sublime 上尝试一下。哈哈...
没问题您有任何问题我很乐意为您的困惑提供帮助。
奇怪的是我网站上的所有其他页面都在移动设置中工作，除了联系页面。我看到它在移动设备中完美填充，然后迅速恢复到桌面模式？关于为什么的任何想法？我想知道它是否与联系表本身有关？

标签： html css mobile responsive-design

【解决方案1】：

如果你刚刚开始，很多人会告诉你先 a 然后 b，或者 b 然后 a。我个人的经验是，您应该首先关注如何为桌面环境制作网站。您将学习基础知识。慢慢来，但你肯定会掌握它。

一旦你完全学会了 HTML、CSS 和一些 JS。我建议你开始学习移动网页设计。

一些网站可以让你继续前进

附：不要太担心选择哪个文本编辑器。许多人会说A 比B 有更多的功能。不要让功能使您偏离学习 Web 开发的道路。你的主要焦点应该是如何创建一个网页。如何设计它。如何调试它。如何修改它。如何添加动画等！

【讨论】：

【解决方案2】：

您应该逐步构建。元素的含义元素，您在进行更改时在每个目标媒体上进行测试。这样您就可以识别问题。否则，您最终会得到一个巨大的结构，其中可能存在大约 30 个不同的问题，并且您需要更改每个 DOM 元素以找出问题所在。

【讨论】：

【解决方案3】：

您需要尽可能地设计带有 %(Width, Height, etc.) 的东西，并且您需要探索@media 查询，您走在正确的轨道上。这是一个例子。不要忘记使用 !important 否则它将不起作用。这告诉站点/应用程序在满足条件时忽略以前的 css（在这种情况下是分辨率大小）

 @media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
 .centered{font-size:12pt!important;}
 }
 @media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
 .centered{font-size:11pt!important;}
 }
 @media only screen and (max-width:600px){
 .centered{font-size:10pt!important;}
 }
 @media only screen and (max-width:400px){
 .centered{font-size:9pt!important;}
 }
 @media only screen and (max-width:200px){
 .centered{font-size:8pt!important;}
 }

 .centered{ 
 position: absolute; 
 width:100%;
 height:auto;
 text-align:center;
 font-size:14pt;
 }

HTML

 <div class="centered">Hello</div>

请注意，您可以对宽度、高度、边距和其他所有内容执行此操作。希望能帮助到你。您必须将其应用于您的需求。

【讨论】：