响应迅速的网页设计不起作用

我是响应式Web设计的新手，所以我不确定为什么这不起作用，但它肯定与我有关。我不确定如何使当前的网站"响应迅速"，并且我已经尝试了一段时间了。下面显示的代码。 May 通过浏览器来运行它。注意：我想不是使用第三方CSS库，例如Bootstrap

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;}

您的帮助将不胜感激！谢谢！

我可以欣赏从头开始构建响应能力，您将通过使用Flexbox获得干净，清脆且简单的解决方案。要获得更多控制，请使用引导或物质化或其他框架。它也会更快。在他们的头脑中，没有人会更简单地皱眉。

.txt-jumbo(样式为标头字体(的默认值为 100px。您使用指定的font-size: -40px的媒体查询比600px更宽。font-size不能占负值。

要使字体在小屏幕上较小，请尝试以下内容：

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

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

有几种方法可以使导航"崩溃"。要使链接堆叠，请将它们设置为内联块元素并将其宽度设置为100％。

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

使用小于600px宽的屏幕时，链接现在将占用屏幕的整个宽度。display: inline-block允许他们堆叠。

1(对于标题，我使用2个媒体查询：

@media screen and (max-width:803px) {
    .centered-divcontent {
        font-size: 50px;
    }
} 
@media screen and (max-width:415px) {
    .centered-divcontent {
        font-size: 30px;
    }
}

2(对于Navbar，我使用%代替px。

li {
    margin: 10px 2% 10px 1px;
    //More Code
}
li a {
     padding: 5% 7%;
     //More Code
}

3(对于页脚信息语言，我已经更改了您的代码。

完整代码：

@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>

相关内容

最新更新

热门标签：