1. 首页
  2. 问答
  3. 如何使我的网站响应

如何使我的网站响应

2015-11-03 92 views
1

我是新手引导，我很难设置我的媒体查询与正确的突破点，我觉得我的网站不能正确缩放。当我设置@media（min-width：1200px）时，我的网站看起来很完美。如何让我的布局看起来适合移动设备和平板电脑设备？如何使我的网站响应

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 

     <title>The Portfolio of Jason Murray</title> 

     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
     <link id="orginal" href="css/default-theme.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 

     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 


    </head> 

    <body> 
     <!--=========== HEADER SECTION ================--> 
     <header id="header"> 
      <!-- BEGIN MENU --> 
      <div class="menu_area"> 
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
       <div class="container"> 
       <div class="navbar-header"> 
       <!-- FOR MOBILE VIEW COLLAPSED BUTTON --> 
       <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> 

       <!-- LOGO --> 
       <a class="navbar-brand" href="index.html">Jason<span>Murray</span></a> 
       </div> 

       <div id="navbar" class="navbar-collapse collapse"> 
       <ul id="top-menu" class="nav navbar-nav navbar-right main_nav"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#portfolio">Portfolio</a></li>    
        <li><a href="#contact">Contact</a></li>       
       </ul>   
       </div><!--/.nav-collapse --> 
       </div>  
      </nav> 
      </div><!-- END MENU --> 
     </header> 
     <!--=========== END HEADER SECTION ================--> 

     <!--=========== MAIN CONTENT SECTION ================--> 
     <div class="jumbotron">   
      <div class="container"> 
       <div class="image_opacity"></div> 
       <div class="caption"> 
        <h2>Front-End</h2> 
        <h2>Web Developer</h2> 
        <p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p> 
        <a href="#" class="caption_btn">Recent Work</a> 
       </div> 
      </div> 
     </div> 
     <!--=========== END MAIN CONTENT SECTION ================--> 

     <!--=========== FOOTER SECTION================--> 
     <footer id="footer"> 
      <div class="container"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-6 col-sm-6"> 
       <div class="footer_left"> 
        <p>&copy; 2015 <a href="index.html" target="_blank">Jason Murray Web Design</a>. All Rights Reserved</p> 
       </div> 
       </div> 
       <div class="col-lg-6 col-md-6 col-sm-6"> 
       <div class="footer_right"> 
        <ul class="social_nav"> 
        <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
        <li><a href="#"><i class="fa fa-twitter"></i></a></li> 
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      </div> 
     </footer> 
     <!--=========== END FOOTER SECTION================--> 
     <!-- jQuery --> 
     <script src="js/jquery.js"></script> 

     <!-- Bootstrap Core JavaScript --> 
     <script src="js/bootstrap.min.js"></script> 

     </body> 

     </html>

CSS代码：

body,html{ 
    overflow-x:hidden; 
} 
body { 
font-family: 'Open Sans', sans-serif; 
    overflow-x: hidden !important; 
} 

ul{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

a{ 
    text-decoration: none; 
    color: #2f2f2f; 

} 
a:focus{ 
    outline: none; 
    text-decoration: none; 
} 
h1,h2{ 
    font-family: 'Montserrat', sans-serif; 
} 
h3,h4,h5,h6{ 
    font-family: 'Varela', sans-serif; 
} 

h2 { 
    color: #313338; 
    font-size: 72px; 
    font-weight: 700; 
    line-height: 57px; 
    margin: 0; 
    padding-bottom: 10px; 
    text-transform: uppercase; 
} 
img{ 
border:none; 
} 

/*--------------------*/ 
/* HEADER */ 
/*--------------------*/ 

#header{ 
    float: left; 
    display: inline; 
    width: 100%; 
    position: relative; 
} 

/*--------.menu_area-------- */ 
.menu_area{ 
    position: absolute; 
    left:0; 
    right: 0; 
    top: 0; 
} 
.navbar-default { 
    background-color: #000000; 
    border-color: transparent; 
    padding: 12px 0px; 
} 
.past-main { 
    background-color: rgba(0,0,0,0.8); 
    margin-top: 0px; 
    padding:6px 0px; 
    -webkit-transition: all 0.5s ease 0s; 
    -o-transition: all 0.5s ease 0s; 
    transition: all 0.5s ease 0s; 

} 
#navbar{overflow-x: hidden;} 

.navbar-brand {                                                                                                       
    color: #fff !important; 
    font-size: 24px; 
    font-weight: bolder; 
    font-family: 'Varela', sans-serif; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    background-color: transparent; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #fff; 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
} 
.navbar-default .navbar-nav > li > a:hover{ 
    text-transform: uppercase; 
    color: #2da2c8; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    background-color: transparent; 
    color: #2da2c8; 
} 
.navbar-brand > span { 
    color: #2da2c8; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #2da2c8; 
} 


/*--------------------*/ 
/* MAIN CONTENT - HOME */ 
/*--------------------*/ 
.jumbotron { 
    background: url("../img/lucho-49.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    margin-top: 75px; 
    height: 320px; 
} 
.image_opacity{ 
    background: none repeat scroll 0 0 #242434; 
    margin-top: 75px; 
    height: 320px; 
    opacity: 0.8; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
    z-index: 9; 
} 
.caption { 
    margin-top: 20%; 
    padding: 5px 0; 
    position: relative; 
    text-align: center; 
    z-index: 999; 
} 
.caption > h2 { 
    color: #ffffff; 
    font-size: 18px; 
    font-weight: 700; 
    line-height: 12px; 
    margin: 0 auto 10px; 
    padding-bottom: 8px; 
    text-align: center; 
    text-transform: uppercase; 
    width: 90%; 
} 
.caption>p{ 
    color: #ffffff; 
    font-size: 12px;  
} 
.caption_btn{ 
    padding: 10px 15px; 
    border: 2px solid #fff; 
    color: #fff; 
    font-size: 12px; 
    display: inline-block; 
    text-transform: uppercase; 
} 
.caption_btn:hover,.caption_btn:focus{ 
    border-color:#2da2c8; 
    color: #2da2c8; 
    text-decoration: none; 
} 

/*--------------------*/ 
/* FOOTER */ 
/*--------------------*/ 

#footer{ 
    float: left; 
    display: inline; 
    width: 100%; 
    padding: 12px; 
    background-color: #000; 
} 
.footer_left{ 
    float: left; 
    display: inline; 
    width: 100%; 
} 
.footer_left > p { 
    font-size: 12px; 
    text-align: center; 
    color: #ffffff; 
    margin-bottom: 5px; 
    margin-top: 5px; 
} 
.footer_left > p a { 
    font-weight: bold; 
} 
.footer_right{ 
    float: left; 
    display: inline; 
    width: 100%; 
} 
.social_nav{ 
    text-align: center; 
} 
.social_nav li{ 
    display: inline-block; 
} 
.social_nav li a { 
    border: 1px solid #fff; 
    color: #ffffff; 
    display: inline-block; 
    font-size: 18px; 
    height: 30px; 
    margin-left: 5px; 
    text-align: center; 
    width: 35px; 
    line-height: 28px; 
    -webkit-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.social_nav li a:hover{ 
    color: #2da2c8; 
    border-color: #2da2c8; 
} 

/*----------------------------------*/ 
/* RESPONSIVE STYLE - MEDIA QUERIES */ 
/*----------------------------------*/ 

@media(min-width: 768px) { 
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;} 
.navbar-default .navbar-nav > li > a {font-size: 15px;} 
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 872px;} 
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 872px;opacity: 0.8;width: 100%;} 
.caption {margin-top: 30%;position: relative;text-align: center;z-index: 999;} 
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;} 
.caption> p {color: #ffffff;font-size: 18px;} 
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;} 
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;} 
#footer{padding: 24px;} 
#footer > .container > .row {margin-right: auto;} 
.footer_left > p {font-size: 13px;text-align: left;} 
.social_nav{text-align: right;} 
} 

@media(min-width: 1200px) { 
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;} 
.navbar-default .navbar-nav > li > a {font-size: 15px;} 
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 842px;} 
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 842px;opacity: 0.8;width: 100%;} 
.caption {margin-top: 20%;position: relative;text-align: center;z-index: 999;} 
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;} 
.caption > p {color: #ffffff;font-size: 20px;} 
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;} 
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;} 
#footer{padding: 24px;} 
.footer_left > p {font-size: 15px;text-align: left;} 
.social_nav{text-align: right;}

来源

2015-11-03 Jason Murray

+1

你能创造出您与HTML和CSS实现什么小例子，然后解释什么是不工作？目前还不清楚你的问题是什么问题。 – ajshort

+0

我喜欢你的设计简单真棒：D – Fiido93

回答

1

下面是标准的引导v3.3.5媒体查询，并与概述了响应类可用的文件相对应。

/* Extra Small Devices, .visible-xs-* */ 
@media (max-width: 767px) {} 

/* Small Devices, .visible-sm-* */ 
@media (min-width: 768px) and (max-width: 991px) {} 

/* Medium Devices, .visible-md-* */ 
@media (min-width: 992px) and (max-width: 1199px) {} 

/* Large Devices, .visible-lg-* */ 
@media (min-width: 1200px) {}

媒体查询的设备：

/* Large desktops and laptops */ 
@media (min-width: 1200px) { 

} 

/* Landscape tablets and medium desktops */ 
@media (min-width: 992px) and (max-width: 1199px) { 

} 

/* Portrait tablets and small desktops */ 
@media (min-width: 768px) and (max-width: 991px) { 

} 

/* Landscape phones and portrait tablets */ 
@media (max-width: 767px) { 

} 

/* Portrait phones and smaller */ 
@media (max-width: 480px) { 

}

http://getbootstrap.com/css/#responsive-utilities

来源

2015-11-03 02:34:18

+0

我的网站存在的问题是，无论何时我在浏览器中测试我的网站（例如firefox）时，我会在缩放浏览器时看到空白区域。如何让我的网站在没有显示空白处显示？ –

+0

我将不得不看到一个代码示例来帮助你。 –

+0

请参阅我的原始问题，我发布了我的HTML和CSS代码。 –

相关问题

 相关问题