响应式网页设计不工作
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 或其他框架。它也会快得多。任何头脑正常的人都不会因为变得简单而皱眉。
我是响应式网页设计的新手,所以我不确定为什么这不起作用,但这肯定与我有关。我不太确定如何制作当前的网站 "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 ofpx
.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 或其他框架。它也会快得多。任何头脑正常的人都不会因为变得简单而皱眉。