如何使网站在移动设备上响应
[英]How to make website responsive on mobile
问题描述
我的网站在桌面上看起来很棒，但是我无法在移动设备上完美地扩展它。 我继续将元标记放在每个页面上，但它仍然无法完美缩放。
任何人都可以帮助我了解如何实现这一目标吗？ 或者也许是一个很好的视频教程？ 已添加图片，我正在使用响应式应用程序来帮助我。
另外，我是 Web 开发的新手，我在桌面而不是移动应用程序上完美地获得我的网站是不是很糟糕？ 大多数 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>
3 个解决方案
解决方案1
0 2018-02-05 23:25:35
解决方案2
0 2018-02-05 23:44:49
您需要尽可能多地使用 %(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>
请注意，您可以为宽度、高度、边距和其他所有内容执行此操作。 希望能帮助到你。 您必须将其应用于您的需求。
解决方案3
-1 2018-02-05 23:35:42
您应该逐步构建。 元素的含义 元素，您在进行更改时对每个目标媒体进行测试。 这样您就可以识别问题。 否则你最终会得到一个巨大的结构，其中可能有大约 30 个不同的问题，你需要更改每个 DOM 元素以找到问题所在。
如何使我的网站对移动设备做出响应
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.