Question

任何人都可以帮助我获取响应代码，以便我们可以将其用于移动设备等吗？

出了什么问题：

如果您重新缩放网站，则不会正确加载渐变文字。
页脚未贴在底部，无法在移动设备上正确加载。

HTML代码为：

<!doctype html>
<html>
<head>
<!--
Website door Davey Minkhorst en Bas Welhuis
Versie 0.2

Update 02-12-2015
Gewoon. Goede. Marketing.

info@wiljekoffie.com
Wegtersweg 39
7556BP Hengelo

-->
<meta charset="UTF-8">
<title>Wil Je Koffie - Digital Marketing</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Digital Marketing inclusief video, web en strategie om sales te behalen">
<meta name="author" content="Wil Je Koffie">
<meta name="keywords" content="digital,marketing,online,automation">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="//use.typekit.net/pby2hib.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="http://www.wiljekoffie.com/v5/css/style.css">
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-63106048-2', 'auto');
 ga('send', 'pageview');
</script> 
<script type="application/ld+json">
   {
     "@context": "http://schema.org",
     "@type": "Organization",
     "url": "http://www.wiljekoffie.com",
     "logo": "http://www.wiljekoffie.com/Logo.png",
          "contactPoint" : [
       { "@type" : "ContactPoint",
         "telephone" : "+31-643008099",
         "contactType" : "sales"
                } ] }
   }
 </script>
 <script src="../assets/js/ie-emulation-modes-warning.js"></script>
 <script>
 setTimeout(function(){_gaq.push(['_trackEvent', 'Control', 'Bounce Rate', '7500'])},Time in milliseconds)
 </script>
 </head>

 <body>
 <div class="logo">
 <img src="http://wiljekoffie.com/images/Logo.png" style="width:80px;height:auto;" alt="Logo Wil Je Koffie">
 </div>

 <div class="tekst">
 <h1>
 WIL JE KOFFIE IS EEN<br>
 <span id="gradient">DIGITAL MARKETING</span> AGENCY<br>
 GESPECIALISEERD IN<br>
 MARKETING AUTOMATION.<br>
 -
 </h1>

 <span class="subtekst">
 Wij zijn een strategische partner op het gebied van marketing automation,         <br>
 gespecialiseerd in videotoepassing. We geloven in meten is weten, onderzoek en feiten.
 </span>

 </div>





 <div class="footer">

 <div class="left" id="w1">
 Bas Welhuis<br>
 06 - 1337 1337<br>
 bas@wiljekoffie.com
 </div>

 <div class="right" id="w3">
 Davey Minkhorst<br>
 06 - 1337 1337<br>
 davey@wiljekoffie.com
 </div>

 <div id="w2">
 Wil Je Koffie<br>
 Wegtersweg 39<br>
 7556BP Hengelo
 </div>


 </div>

 </body>
 </html>

CSS代码是：

@font-face {
font-family: 'rhoderegular';
src: url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.eot');
src: url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.woff2') format('woff2'),
     url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.woff') format('woff'),
     url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.ttf') format('truetype'),
     url('http://www.wiljekoffie.com/v5/font/rhodesemiboldcondensed-webfont.svg#rhoderegular') format('svg');
}

html {
    width:100%;
    height: auto;
    box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Bree";
 }

.logo {
  padding-top: 2%;
  padding-right: 2%;
  text-align: right;
 }

.tekst {
  padding-left: 10%;
  margin: 100px auto;
  text-align:left;
 }

.subtekst {
  padding-top: 0px;
  font-family: "bree",sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #000000;
  font-size: 1em;
 }

h1 {
  font-family: 'rhoderegular';
  font-size: 50px;
  font-weight: 100;
 }

#gradient {
  background: -webkit-linear-gradient(left, #3BD99F, #9600FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 p {
font-family: "bree",sans-serif;
font-style: normal;
font-weight: 400;
color: #FFFFFF;
font-size: 1em;
}

.footer {
 height: 100%;
 background-color: black;
 text-align: center;
 color: white;
 bottom: 0px;
 padding-bottom: 0px;
 }

 .left {
   float: left;
   }

 .right {
   float:right;
  }

 #w1 {
   padding-top: 20px;
   padding-bottom: 20px;
 }

#w2 {
  padding-top: 20px;
  padding-bottom: 20px;
 }
#w3{ 
 padding-top: 20px;
 padding-bottom: 20px;
}

.black {
   background-color: black;
 }

Answer 1

对于页脚，请删除height属性并添加：

.footer{
    background-color: #000;
    text-align: center;
    color: #FFF;
    bottom: 0px;
    padding-bottom: 0px;
    position: fixed;
    right: 0px;
    left: 0px;
}

对于渐变错误的渐变，请阅读线性渐变文档以获取更多信息。但你可以加上这个：

#grad {
    background: -webkit-linear-gradient(left, #3BD99F, #9600FA); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #3BD99F, #9600FA); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #3BD99F, #9600FA); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #3BD99F, #9600FA); /* Standard syntax */
}

CSS Gradient没有正确加载+页脚没有粘在底部并且在移动设备上无法扩展

1 个答案: