html - 如何让我的整个网站在移动设备上响应?
问题描述
我知道我不太擅长 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" width="792px" height="612px" 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">
.st0{fill:none;stroke:#FDFDFD;}
.st1{fill: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_0{stroke-dasharray:0 2;stroke-dashoffset:1;animation:GIfDAJwL_draw_0 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}.GIfDAJwL_1{stroke-dasharray:1094 1096;stroke-dashoffset:1095;animation:GIfDAJwL_draw_1 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}@keyframes GIfDAJwL_draw{100%{stroke-dashoffset:0;}}@keyframes GIfDAJwL_fade{0%{stroke-opacity:1;}95.77464788732394%{stroke-opacity:1;}100%{stroke-opacity:0;}}@keyframes GIfDAJwL_draw_0{7.042253521126761%{stroke-dashoffset: 1}36.15023474178404%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}@keyframes GIfDAJwL_draw_1{21.596244131455396%{stroke-dashoffset: 1095}50.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" alt="aki">
</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" alt="Lancer"></a>
</div>
<div class="column">
<img src="Naturalthinker.jpg" alt="NT">
</div>
<div class="column">
<video controls>
<source src="Circleoflife.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Essentiel.png" alt="Es">
</div>
<div class="column">
<img src="Japan.png" alt="Es">
</div>
<div class="column">
<img src="black.jpg" alt="Es">
</div>
<div class="column">
<img src="content.jpg" alt="Es">
</div>
<div class="column">
<img src="icons.jpg" alt="Es">
</div>
<div class="column">
<img src="ss15.png" alt="Es">
</div>
<div class="column">
<img src="mens.jpg" alt="Es">
</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;
}
解决方案
我的建议是,使用像 bootstrap 这样的 css 框架。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
或者
如果不想使用框架,可以使用媒体查询。
/* 手机 - 320x480px */
@media screen and (max-width: 480px) {
h1{
color: blue;
}
}
/* 平板电脑 - 768x1024px */
@media screen and (max-width: 1024px) {
h1{
color: red;
}
}
推荐阅读
- python-3.x - 使用 shutil.rmtree(dir) 清理安装的 docker 文件夹
- python - 在我的项目中运行单个模块时出现 Python ModuleNotFoundError
- sql - 数据透视表查询上的 Varchar 到 Int 错误
- json - 输入'列表
' 不是类型 'List 的子类型 >? - zabbix - Zabbix:删除不再可发现的主机
- python - 从两个数据帧的两列中的相似值创建新数据帧
- javascript - 使用 Lodash 对对象数组进行分组和求和
- c++ - 是否可以强制通过引用或指针(C++)传递一个类?
- python - 如何根据我的意见而不是基于 Python 中 Pandas 数据框中的某些键来更改索引的顺序?
- python - Python 请求被网站阻止