堆栈内存溢出
  简体   繁体   English

响应式网页设计不起作用

[英]Responsive Web Design Not working

 原文  2017-06-04 01:53:42  6   3    html/ css/ responsive

问题描述

I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. 我是响应式Web设计的新手，所以不确定该为什么不起作用，但肯定与我有关。 I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. 我不确定如何使当前网站“具有响应性”，并且我已经尝试了很长时间。 Code shown below. 代码如下所示。 It may help to run it via browser. 通过浏览器运行它可能会有所帮助。 NOTE: I would like to not use a 3rd party css library like Bootstrap 注意：我不想使用Bootstrap之类的第三方CSS库

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

Your help would be appreciated! 您的帮助将不胜感激！ Thanks! 谢谢！

3 个解决方案

解决方案1
 0  2017-06-04 03:04:35

1)For Header I use 2 Media Query Like This : 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)For navbar I use % instead of px .Like this : 2）对于导航栏，我使用%而不是px 。 

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. 3）对于页脚信息语言，我对您的代码做了一些更改。

Full Code: 完整代码： 

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

解决方案2
 0  2017-06-04 03:15:22

.txt-jumbo , which styles the header font, has a default value of 100px . .txt-jumbo设置标题字体的样式，默认值为100px 。 The media query you used specified font-size: -40px for screens wider than 600px. 您使用的媒体查询指定了font-size: -40px的屏幕大于600px。 font-size cannot take a negative value. font-size不能为负值。

To make the font smaller on small screens, try something like: 要在小屏幕上缩小字体，请尝试以下操作： 

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

where max-width: 600px means that the styles contained apply to screens less than 600px wide. 其中max-width: 600px表示所包含的样式适用于max-width: 600px小于600px的屏幕。

There are several ways to make the navigation "collapse". 有几种方法可以使导航“折叠”。 To make the links stack, make them inline-block elements and set their widths to 100%. 要使链接堆栈，请使其成为行内块元素，并将其宽度设置为100％。 

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

When using a screen less than 600px wide, the links will now take up the entire width of the screen. 当使用宽度小于600像素的屏幕时，链接现在将占据屏幕的整个宽度。 display: inline-block allows them to stack. display: inline-block允许它们堆叠。

解决方案3
 0 已采纳  2017-06-04 03:25:01

As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. 尽我所能从头开始建立响应能力，通过使用Flexbox，您将获得一个干净，简洁，简单的解决方案。 For more control, use Bootstrap or Materialize, or another framework. 要获得更多控制，请使用Bootstrap或Materialize或其他框架。 It will also be much quicker. 这也将更快。 No person in their right mind would frown on going simpler. 没有一个拥有正确思想的人会皱眉去简单。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 响应式网页设计不适用于图片 - Responsive web design not working for pictures 媒体查询在带有网格的响应式网页设计中不起作用 - Media queries not working in responsive web design with grids 响应式 web 设计适用于桌面，但不适用于移动设备 - Responsive web design is working on desktop but not on the mobile device 响应式网页设计 - Responsive web design cordova - 响应式网页设计 - cordova - responsive web design 响应式网页设计 - Responsive Web Design 自动化响应式网页设计 - Automating Responsive Web Design 响应式网页设计问题 - Responsive web design questions CSS 中的响应式 Web 设计 - Responsive Web Design in CSS 响应式网页设计和自动旋转 - Responsive Web Design and Auotorotations
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM