HTML - 如何让我的网站完全显示在不同的屏幕尺寸上?

时间:2017-05-29 14:07:11

标签: html5 css3

目前,我的网站看起来并不那么棒。所以这是我的问题:

我已经创建了一些基本和简单的代码,(注意:此代码使用了边距。我不确定这是否是一个问题)但是它与屏幕尺寸相对应,这看起来并不那么好。尝试通过浏览器运行此代码,看看我的意思:

HTML

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>

</head>
<body>

<nav>
        <ul>
            <h3 style="margin:15px;" class="logo">ONECLICKLEARN</h3>
            <li><a class="navlink" href="#">Home</a></li>
            <li><a class="navlink" href="#">About</a></li>
            <li><a class="navlink" href="#">Templates</a></li>
            <li><a class="navlink" href="/css-library">CSS Library</a></li>
            <li><a class="navlink" href="#">Updates</a></li>
            <li><a class="navlink" href="#">Downloads</a></li>
        </ul>
    </nav>


  <div class="content-left">
       <h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
       <h3 class="margin-para">Okay, let's get things straight: you're going 
to get tired of clicking every single download button if you want 
<em>all</em> 
our libraries. So we came up with a little something that just might 
brighten 
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library 
that 
rolls ever single library we have rolled into one. So clear your storage 
space, 
and get ready for <em>ocelot!</em> - Current version: 1.0.</h3>
       <hr>

        </div>


  <div class="details">
        <h1>GET OCELOT</h1>
        <button class="button-greentheme">MORE INFO</button> <button 
class="button-graytheme">SAFE LINK IT!</button>
    </div>

<div class="content-left">
       <h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
       <h3 class="margin-para">A new CSS library has <em>just</em> come out! 
It's the first CSS library to be done by this website. The name is Bibrary. 
This handy library covers all the buttons you could want, but remember - not 
all buttons are covered, but be sure to watch this one. It could be updated 
as much as 5 times a year!</h3>
        </div>


  <div class="details">
        <h1>GET BIBRARY</h1>
        <button class="button-greentheme">MORE INFO</button> <button 
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
    </div>

</body>
</html>

我有一个保证金:30px;以及正确的30px; 如果你竖起大拇指,请说明理由

3 个答案:

答案 0 :(得分:0)

您可以使用Bootstrap Framework。它们是最受欢迎和使用的响应式框架,您可以查看getbootstrap.com。在youtube上为Bootstrap提供了很多很好的教程。

如果您想要无框架方式,可以将@media与纯CSS一起使用。您可以使用谷歌阅读大量文档。

答案 1 :(得分:0)

您可以在css文件中使用媒体查询。 示例语法:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

答案 2 :(得分:0)

试用此代码

<!doctype html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/styles.css" rel="stylesheet" type="text/css">   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <meta charset="UTF-8">
      <title>Portal</title>

<style>
.content{
    border-bottom: 1px solid #000;
}
</style>


   </head>
   <body>

         <nav class="navbar navbar-default">
            <div class="container-fluid">
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand logo"  href="#">ONECLICKLEARN</a>
               </div>
               <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                     <li><a class="navlink" href="#">Home</a></li>
                     <li><a class="navlink" href="#">About</a></li>
                     <li><a class="navlink" href="#">Templates</a></li>
                     <li><a class="navlink" href="/css-library">CSS Library</a></li>
                     <li><a class="navlink" href="#">Updates</a></li>
                     <li><a class="navlink" href="#">Downloads</a></li>
                  </ul>
               </div>            
            </div>          
         </nav>
         <div class="container-fluid">
            <div class="col-xs-12 content">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">Okay, let's get things straight: you're going 
                     to get tired of clicking every single download button if you want 
                     <em>all</em> 
                     our libraries. So we came up with a little something that just might 
                     brighten 
                     your day a little. We call it <em>Ocelot</em>. Ocelot is our main library 
                     that 
                     rolls ever single library we have rolled into one. So clear your storage 
                     space, 
                     and get ready for <em>ocelot!</em> - Current version: 1.0.
                  </h3>

               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET OCELOT</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     class="button-graytheme">SAFE LINK IT!</button>
               </div>

                </div>
               <div class="col-xs-12">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">A new CSS library has <em>just</em> come out! 
                     It's the first CSS library to be done by this website. The name is Bibrary. 
                     This handy library covers all the buttons you could want, but remember - not 
                     all buttons are covered, but be sure to watch this one. It could be updated 
                     as much as 5 times a year!
                  </h3>
               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET BIBRARY</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
               </div>
            </div>
         </div>

   </body>
</html>
<script  src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>