Question

我想让我的网站移动化。我有2个css文件，一个用于移动版，一个用于普通版。将它们放在我的HTML文件的头部不起作用，因为正常版本的背景会扰乱移动版本，因此移动版本根本不起作用。 css代码完全不同。那么有没有人知道如何在正常版本的背景和移动版本的背景颜色的同时制作我的手机？

这是普通版本css的代码：

<link rel="stylesheet" href="index.css" charset="utf-8">
<link rel="stylesheet" href="mobile.css" charset="utf-8">

body {
padding: 0px 20px 0px 20px;
}

p {
background: rgba(0, 0, 0 ,0.6);
}

.index{
 background-image: url("index.png");
 background-size: 100%;
 background-color: black ;
 font-family:'Coming Soon', cursive;
 font-size: 17px;
 color: white;

}
.JM{
background-image: url("jeffersonmanor.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TV{
background-image: url("thevilla.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.PS{
background-image: url("psychoshock.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.HH{
background-image: url("hauntedholidays.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TC{
background-image: url("theclinic.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

div.menubar > ul {
list-style-type: none;
margin: 0;
background-color:rgba(191, 0, 0, 0.4);
color: #fff ;
}

a.link {
color: yellow
}

div.menubar > ul > a > li {
display: inline-block;
padding: 15px;
overflow: hidden;
color: white;
}

div.menubar > ul > a > li:hover {
  background-color: #737373;
}

#index:active {
transform: scale(0.6);
transition-duration: 0,2s ;

}

#JeffersonManor:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}


#TheVilla:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#PsychoShock:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#HauntedHolidays:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#TheClinic:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

::selection {
background: #ee2c2c ;
}

::-webkit-selection {
background:  #ee2c2c ;
}

::-moz-selection {
background: #ee2c2c;
}

这是我的HTML主管：

<link rel="stylesheet" href="mobile.css" charset="utf-8">
  <link rel="icon" href= "tabicon.png">
    <title>Walibi Haunted Houses</title>
      <div class="menubar">

        <ul>
      <a href="index.html"><li id="index">Walibi Fright Nights</li></a>
      <a href="JeffersonManor.html"><li id="JeffersonManor">Jefferson Manor</li></a>
      <a href="TheVilla.html"><li id="TheVilla">The Villa</li></a>
      <a href="PsychoShock.html"><li id="PsychoShock">Psychoschock</li></a>
      <a href="HauntedHolidays.html"><li id="HauntedHolidays">Haunted Holidays</li></a>
      <a href="TheClinic.html"><li id="TheClinic">The Clinic</li></a>
        </ul>
      </div>

这是移动版本的css（部分内容）：

media screen and (max-width: 500px) {

  body {
  background-image: none;
  background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
  head {
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
}

Answer 1

尝试这个简单的媒体查询

＆＃13;

body {
  background: #00ff00 url(http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-color: #fff;
  
}

@media only screen and (max-width: 500px) {
    body {
        background: #00ff00;
    }
}

＆＃13;

<p>Please test it to reduce screen size.</p>

＆＃13;

Answer 2

如果你想在第三个css文件中包含2个css文件，你应该以不同的方式进行，但不能类似于＆＃34; HTML-style＆＃34; <link ...>

您的css文件normal_version.css应该以：

开头

@include url('index.css');
@include url('mobile.css');

Answer 3

这是另一种解决方案。使用适当的媒体查询标记。

@media (max-width: 500px){
  body {background-image: none; background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
 .index {
        background-image: none;
        }

  head {
       font-family:'Coming Soon', cursive;
       font-size: 15px;
       color: #af111c;
       }
}

正常版本的背景和移动版

3 个答案: