如何使网站响应移动

时间：2018-02-05 23:13:50

标签： html css mobile responsive-design

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

任何人都可以帮我解决这个问题吗？或许是一个很好的视频教程？ Pic已添加，我正在使用响应式应用来帮助我。

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

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>

3 个答案:

答案 0 :(得分：0)

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

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

一些让你前往的网站

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

答案 1 :(得分：0)

你需要尽可能地设计％（宽度，高度等）的东西，你需要探索@media查询，你是在正确的轨道上。这是一个例子。别忘了使用！重要或不起作用。这告诉站点/ app如果满足条件（在这种情况下是分辨率大小）

，则忽略先前的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>

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

答案 2 :(得分：-1)

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

相关问题
最新问题