如何让我的整个网站在移动设备上响应？
Posted
技术标签:
【中文标题】如何让我的整个网站在移动设备上响应？【英文标题】：How do I make my entire website responsive on mobile? 【发布时间】：2018-10-13 06:14:02 【问题描述】：我知道我不太擅长 html5，但我正在积极学习。我一直无法让我的网站在移动浏览器上响应。我能够让它在计算机上的网络浏览器上响应。
谁能告诉我如何使它具有响应性并向我解释该功能是如何工作的？
非常感谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cayla.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
</head>
<body>
<div class="img1">
<div class="one">
<div style="width:60%;background-color:#D8D8D8;margin-bottom:3%;">
<!-- <svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="" xml:space="preserve">-->
<svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="" xml:space="preserve">
<style type="text/css">
.st0fill:none;stroke:#FDFDFD;
.st1fill:none;stroke:#12100B;stroke-width:0.75;
</style>
<path class="st1 GIfDAJwL_0" d="M864,204"></path>
<path class="st0 GIfDAJwL_1" d="M426.357,291.773c-0.041-12.345-1.707-22.665-4.352-34.209c-8.392,4.478-13.649,40.339-13.631,49.989
c0.034,17.964-1.063,41.607,6.963,56.455c8.124,15.025,19.178,4.285,24.85-7.853c5.971-12.777,7.685-22.798,7.881-37.559
c-1.444,5.259-5.496,8.714-3.049,12.917c1.016-4.619,3.755-6.121,3.922-10.898c-0.027,4.104,0.264,7.119,2.795,9.768
c1.506-5.469,3.623-13.664,3.172-17.732c-0.113,3.707-0.037,7.516,0.22,11.143c3.36-6.947,4.348-16.811,6.454-24.181
c3.606,53.796,0.22,113.64,0.22,166.148c1.091-17.07-3.938-34.533-3.938-51.979c-0.004-25.875,1.787-50.906,3.004-76.584
c1.389-29.324,11.799-55.735,15.406-85.365c3.484-28.619,3.25-56.957,3.25-85.942c0,20.127-3.17,40.157-3.85,60.265
c-0.672,19.88-0.455,43.321,10.324,60.186c4.844,7.576,9.213,12.045,16.535,5.148c3.479-3.277,4.025-6.196,4.052-11.49
c-0.541,3.818-2.303,8.03-1.189,11.883c0.229-3.271-0.647-7.569,1.188-10.189c0.972,3.261,0.131,11.245,5.246,6.779
c3.205-2.798,8.143-3.789,12.846-2.784c2.629,0.561,16.42,6.282,18.992,7.717c13.344,7.443,38.292-0.675,52.428-1.938
c19.37-1.731,18.325-3.814,37.57-6.666"></path>
<style>.GIfDAJwL_0stroke-dasharray:0 2;stroke-dashoffset:1;animation:GIfDAJwL_draw_0 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;.GIfDAJwL_1stroke-dasharray:1094 1096;stroke-dashoffset:1095;animation:GIfDAJwL_draw_1 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;@keyframes GIfDAJwL_draw100%stroke-dashoffset:0;@keyframes GIfDAJwL_fade0%stroke-opacity:1;95.77464788732394%stroke-opacity:1;100%stroke-opacity:0;@keyframes GIfDAJwL_draw_07.042253521126761%stroke-dashoffset: 136.15023474178404% stroke-dashoffset: 0;100% stroke-dashoffset: 0;@keyframes GIfDAJwL_draw_121.596244131455396%stroke-dashoffset: 109550.70422535211267% stroke-dashoffset: 0;100% stroke-dashoffset: 0;
</style></svg>
<span class="border">
</span>
</div>
</div>
<section class="section sec1">
<h1>About Me</h1>
<hr size="1" color="#666" align="center" >
<p>
Lorem ipsum dolor sit amet, enim accumsan vim ut, unum noluisse phaedrum ea duo, ne quo voluptaria argumentum. Mel volumus adipisci ne. Eu eos dolorem salutandi euripidis. Vix perfecto deseruisse ex, option scriptorem an ius.
</p>
</section>
<div class="img2">
<div class="txt">
<span class="border trans">
</span>
</div>
</div>
<section class="section sec2">
<h2>Portfolio</h2>
<hr size="1" color="#FFFFFF" align="center">
<div class="row">
<div class="column">
<img src="aki0.png" >
</div>
<div class="column">
<video controls>
<source src="OpenVertices.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<a href="https://youtu.be/SfSKYra8aZw"><img src="Lancer.png" ></a>
</div>
<div class="column">
<img src="Naturalthinker.jpg" >
</div>
<div class="column">
<video controls>
<source src="Circleoflife.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Essentiel.png" >
</div>
<div class="column">
<img src="Japan.png" >
</div>
<div class="column">
<img src="black.jpg" >
</div>
<div class="column">
<img src="content.jpg" >
</div>
<div class="column">
<img src="icons.jpg" >
</div>
<div class="column">
<img src="ss15.png" >
</div>
<div class="column">
<img src="mens.jpg" >
</div>
</section>
<div class="img3">
</div>
</div>
<section class="section sec3">
<h1> Contact Me</h1>
<hr size="1" color="#666" align="center">
<ul class="fa-ul">
<li><i class="far fa-envelope fa-2x"></i>
<div>info@hello.com</div>
</li>
<li><i class="fas fa-mobile-alt fa-2x"></i>
<div>514.123.4567</div>
</li>
<li><i class="fas fa-map-marker-alt fa-2x"></i></i>
<div>Montreal, Canada.</div>
</li>
</ul>
</section>
<section class="section sec4">
<h3>
Copyright @2017.
</h3>
</section>
</body>
</html>
body, html
height: 100%;
margin: 0;
color: #666;
.img1,.img2,.img3
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
.img1
/*background-image: url('../Images/background.jpg');*/
background-color: #D8D8D8;
min-height:100%;
svg.sign
align-items: center;
margin-top: 50%;
margin-left: 50%;
margin-right:200%;
margin-bottom: 50%;
.img2
background-image: url('../color.jpg');
min-height:400px;
opacity:0.70;
.img3
background-image: url('../me.jpg');
min-height:400px;
opacity:0.70;
.section
text-align: center;
padding: 50px 80px;
.sec1
background-color: #f4f4f4;
color: #666;
min-height:200px;
min-width: 300px;
align-content: center;
margin-left: auto;
margin-right: auto;
.sec2
background-color: #282e34;
color: #ddd;
min-height:2250px;
.sec3
background-color: #f4f4f4;
color: #666;
min-height:200px;
align-content: center;
.sec4
background-color: #f4f4f4;
color: #666;
min-height:20px;
align-content: center;
h1
text-transform: uppercase;
font-family:futurastf;
font-size:1.25em;
font-family:sans-serif;
letter-spacing: 3px;
color:#666;
text-align: center;
h2
text-transform: uppercase;
font-family:futurastf;
font-size:18px;
font-family:sans-serif;
letter-spacing: 3px;
color:#FFFFFF;
text-align: center;
h3
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
align-content: center;
margin-right: auto;
margin-left:auto;
text-align: center;
p
overflow:auto;
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
line-height: 30px;
text-align:center;
margin-right: auto;
margin-left:auto;
.txt
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
.txt .border
background-color: #111;
color: #fff;
padding: 20px;
.txt .border.trans
background-color: transparent;
/* Three image containers (use 25% for four, and 50% for two, etc)*/
.column
display:inline-block;
float: center;
width: 48%;
padding: 5px;
/* NEW */
.column img
max-width:100%;
height:auto;
/* NEW */
.column video
max-width:100%;
height:auto;
hr
width: 40%;
.fa-ul
list-style-type: none;
padding-left: 0;
margin-left:0;
/* NEW */
@media only screen and (max-width: 900px)
.column
display:inline-block;
float: center;
width: 100%;
padding: 5px;
hr
width: 100%;
.sec2
background-color: #282e34;
color: #ddd;
min-height:900px;
/* Clear floats after image containers */
.row::after
content: "";
clear: both;
display: table;
.img-wrapper
width: 49.75%;
.img-wrapper2
margin-left:.5%;
.img-wrapper3
margin-top:.5%;
.img-wrapper4
margin-top:.5%;
margin-left:.5%;
.img-wrapper5
width: 49.75%;
.img-wrapper6
width: 49.75%;
.img-wrapper7
width: 49.75%;
ul
list-style-type: none;
color: #666;
margin-left: auto;
margin-right: auto;
align-content: center;
li
clear:both;
li i
font-size:40px;
margin-left: auto;
margin-right: auto;
text-align: center;
li div
float:center;
margin-left: auto;
margin-right: auto;
line-height: 60px;
text-align: center;
【问题讨论】：
这个问题似乎有点宽泛。我建议使用诸如引导程序之类的框架或类似的框架来开始，然后您可以查看这些工作如何重新列等。另外，请注意，在移动设备上和在计算机上做出响应式的东西本质上是一样的，就像你们所有人一样'通常看的是屏幕的大小，所以也许你可以应用你已经完成的，但让它适用于更小的显示器 【参考方案1】：我的建议是，使用像 bootstrap 这样的 css 框架。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
或
如果你不想使用框架，可以使用媒体查询。
/* 手机 - 320x480 像素 */
@media screen and (max-width: 480px)
h1
color: blue;
/* 平板电脑 - 768x1024px */
@media screen and (max-width: 1024px)
h1
color: red;
并尝试使用 http://ami.responsivedesign.is/
【讨论】：
【参考方案2】：您可以使用两种方法来使网站具有响应性。
-
Bootstrap 框架使其能够响应所有大小
设备。查看他们的文档Link
媒体查询Link
【讨论】：
【参考方案3】：您可以通过使用屏幕媒体查询和在 html 文档的头部添加元标记来使网站具有响应性。
媒体查询的工作方式如下：添加屏幕大小，然后添加其中的样式
@media only screen and (max-width: **your screen size here**)
div
color: green;
您可以在这里阅读更多信息：
Responsive Design
Using Media Queries
some Screen sizes
【讨论】：
以上是关于如何让我的整个网站在移动设备上响应？的主要内容，如果未能解决你的问题，请参考以下文章