响应式网页设计不工作

Responsive Web Design Not working

我是响应式网页设计的新手,所以我不确定为什么这不起作用,但这肯定与我有关。我不太确定如何制作当前的网站 "responsive",我已经尝试了很长时间。代码如下所示。它 可能 通过浏览器帮助 运行 它。注意:我想使用像Bootstrap

这样的第三方css库

HTML

    <!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>

<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="head">
<center>
  <h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
  </center>
</div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
        <button class="blue-btn txt-marginall">Learn CSS!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn PHP!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
    <h3>Create actions and animations!<br>
      <br>
      Start Learning Javascript <em>now</em></h3>
    <button class="blue-btn txt-marginall">Learn Javascript!</button>
        </div>
    </div>
<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>
</body>
</html>

CSS

    @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
    margin:0;
    padding:0;
    }

/*nav*/
@media (min-width:600px) {
    .txt-jumbo {
        font-size:-40px;
    }
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float:left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

/*divs*/

.sidecontentleft {
    align-self:center;
    height:300px;
    width:300px;
    float:left;
    }

.sidecontentright {
    align-self:center;
    height:300px;
    width:300px;
    float:right;
    }

.sidecontent {
    text-align:center;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    }

.head {
    width:100%;
    height:350px;
    background-color:#05D7C6;
    color:white;
    text-align:center;
    }

.centered-divcontent {
    text-align:center;
    height: 350px;
    display: table-cell;
    vertical-align: middle;
    }


/*buttons*/

.green-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#04D43C;
    border:none;
    color:white;
    }

.green-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00F040;
    border:none;
    color:white;
    cursor:pointer;
    }

.blue-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#05D7C6;
    border:none;
    color:white;
    }

.blue-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00E9D6;
    border:none;
    color:white;
    cursor:pointer;
    }

.white-btn {
    border-radius:5px;
    height:40px;
    width:auto;
    text-align:center;
    border: #BFBFBF 1px solid;
    text-decoration:none;
    color:black;
    background-color:white;
    }

/*Fonts*/

.txt-jumbo {
    font-size:100px;
    }

.txt-centered {
    text-align:center;
    }

.txt-margin {
    margin-left:25px;
    }

.txt-marginall {
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    }

h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}

非常感谢您的帮助!谢谢!

1)For Header I use 2 Media Query Like This :

@media screen and (max-width:803px) {

    .centered-divcontent {
        font-size: 50px;
    }

} 

@media screen and (max-width:415px) {

    .centered-divcontent {
        font-size: 30px;
    }
} 

2)For navbar I use % instead of px.Like this :

li {
    margin: 10px 2% 10px 1px;
    //More Code
}

li a {
     padding: 5% 7%;
     //More Code
}

3)For Footer Information Languages,I have changed your code a little bit.

完整代码:

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
margin:0;
padding:0;
 }

/*nav*/
@media (min-width:600px) {
.txt-jumbo {
    font-size:-40px;
}
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float:left;
margin: 10px 2% 10px 1px;
}

li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}

li a:hover {
background-color: #111;
}

.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}

.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}

.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}

.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}

.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}

.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}

.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}

.txt-jumbo {
font-size:100px;
}

.txt-centered {
text-align:center;
}

.txt-margin {
margin-left:25px;
}

.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}

.con {
margin-top: 10px;
width: 100%;
clear: both;
}  

.content {
padding: 10px;
}

.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}

@media screen and (max-width:803px) {

.centered-divcontent {
 font-size: 50px;
}

} 

@media screen and (max-width:415px) {

.centered-divcontent {
 font-size: 30px;
}

} 

@media screen and (max-width:920px) {

.sidecontentleft {
 width: 50%;
 box-sizing: border-box;
}

} 

@media screen and (max-width:650px) {

.box {
 width: 100%;
 float:none;
 padding: 20px;
}

.content {
 width: 70%;
 margin: auto;
}

} 
<ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>

<div class="head">
   <center>
  <h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
   </center>
</div>

<div class="con">
   <div class="box left">
  <div class="content">
 <h3>Learn how to construct the blocks of a website!</h3>
 <h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
   </div>
</div>

<div class="box right">
   <div class="content">
  <h3>Learn the Cascading Style Sheet of web development!</h3>
  <h4>Start Learning <em>now</em></h4>
  <button class="blue-btn txt-marginall">Learn CSS!</button>
   </div>
</div>

<div class="box left">
   <div class="content">
  <h3>LLearn data storing in web development!</h3>
  <h4>Start Learning PHP <em>now</em></h4>
  <button class="green-btn txt-marginall">Learn PHP!</button>
   </div>
 </div>
</div>

<div class="con"> 
   <div class="box right">
  <div class="content">
     <h3>Create actions and animations!</h3>
     <h4>Start Learning Javascript <em>now</em></h4>
   <button class="green-btn txt-marginall">Learn JavaScript!</button>
  </div>
</div>

<div class="box left">
   <div class="content">
  <h3>Learn how to construct the blocks of a website!</h3>
  <h4>Start Learning HTML5 <em>now</em></h4>
  <button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
   </div>
</div>

.txt-jumbo,其样式为 header 字体,默认值为 100px。您使用的媒体查询指定 font-size: -40px 适用于宽度超过 600 像素的屏幕。 font-size不能取负值。

要在小屏幕上缩小字体,请尝试以下操作:

@media (max-width: 600px) {
    .txt-jumbo {
        font-size: 50px;
    }
}

其中 max-width: 600px 表示包含的样式适用于宽度小于 600 像素的屏幕。

有几种制作导航的方法"collapse"。要使链接堆叠,请将它们设为 inline-block 元素并将它们的宽度设置为 100%。

@media (max-width: 600px) {
    li {
        display: inline-block;
        width: 100%;
    }
}

当使用宽度小于 600 像素的屏幕时,链接现在将占据整个屏幕宽度。 display: inline-block 允许它们堆叠。

尽管我很欣赏从头开始构建响应能力,但您将通过使用 Flexbox 获得干净、清晰和简单的解决方案。要获得更多控制,请使用 Bootstrap 或 Materialize 或其他框架。它也会快得多。任何头脑正常的人都不会因为变得简单而皱眉。