1

最近几个月我完成了许多响应式构建，并认为我使用的基本样式表可能值得分享！它非常简单但非常有效。我使用了几个 Javascript 库来修复常见错误，但在评论中引用了这些错误。

HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
   <title></title>
   <meta charset="utf-8">
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <meta name="copyright" content="" />

   <!-- http://modernizr.com -->
   <script src="scripts/modernizr.min.js"></script> 

   <link rel="stylesheet" href="css/base.css"  />    
</head>
<body>
   <header id="header" class="env clearfix"><p>Header Content</p></header>
   <div id="body-content" class="env clearfix">
       <p>Body Content</p>
       <p class="mobile-only">Hello Mobile Users</p>
   </div>
   <footer id="footer" class="env clearfix"><p>Footer Content</p></footer>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ -->
<script src="scripts/MobileBoilerplate.js"></script>
<script type="text/javascript"> 
    MBP.scaleFix();
</script>

<!-- https://github.com/scottjehl/Respond -->
<script src="scripts/respond.min.js"></script>

Base.css

body{ }  

#header{ background-color:red; }
#footer{background-color:green;}

p{padding:25px;}

.env { position:relative; max-width:1000px; padding:0; margin:0 auto; width:100%; }
.mobile-only{display:none;}  

@media only screen and (min-width: 1000px)  
{
    .env { max-width: 1400px; }    
    p{padding:50px;}
}

@media only screen and (min-width: 701px) and (max-width: 850px) 
{
    body{font-size:0.9em;}
    .env { max-width: 850px; }    
    p{padding:20px;}
}

@media only screen and (min-width: 701px)  
{    
     .mobile-only{display:none !important;}  
}


@media only screen and (max-width: 700px) {
    .env { max-width: 700px;  min-width:300px;}
    body{font-size:0.9em;}

    .hide-in-mobile{display:none;}
    .mobile-only{display:block;}  
    p{padding:10px;}
}


@media only screen and (min-width: 450px) and (max-width: 700px) 
{
    p{padding:15px;}
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
    #logo{ background:url(/images/logo@2x.png) no-repeat; background-size: 84px 140px;   }
}


.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }
4

0 回答 0