如何创建响应式页面

时间：2018-04-16 18:58:49

标签： html css html5 css3

我正在尝试创建一个响应式登录页面，以更改其移动设备的格式。我曾尝试使用flex box和bootstrap的网格系统来做到这一点，但我想我做错了什么。我希望标题的三个部分在移动设备上占据一条单独的线，而对于较大的设备，所有部分都在同一条线上，而对于三个按钮则相同。目前，当我只是最小化笔记本电脑上的窗口时，这是有效的，但当我在我的移动设备上查看页面时，它无法正常工作。

我还希望instagram按钮在所有设备的底部保持居中。

我的HTML看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <title>RBM Makeup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
    <div class="inner">
        <div class="content">
            <h1> <span id="Rebecca"> Rebecca </span> <span id="Bermingham"> Bermingham </span> <span id="Maguire"> Maguire</span></h1>
            <div class="container">
                <a href="#" class="hvr-sweep-to-right">Portfolio</a>
                <a href="#" class="hvr-sweep-to-bottom">Contact</a>
                <a href="#" class="hvr-sweep-to-left">About Me</a>
            </div>  
        </div>
    </div>

    <div class="footer">
        <div class="instagram">
            <a href="#" class="fa fa-instagram" id="fix"></a>
        </div>
    </div>

</section>
</body>
</html>

我的CSS看起来像这样：

/ 这些是一般位 / 

:root{
    --maroon: #85144b;
    --fuchsia: #f012be;
    --purple: #b10dc9;
    --lime: #01ff70;
    --black: #000000;
    --white: #ffffff;
    --blue: #89cff0;
}

@font-face{
    font-family: 'milkshake';
    src:url(fonts/Milkshake.ttf);
    font-style: normal;
    font-weight: 100;
}

@font-face{
    font-family: 'amble';
    src:url(fonts/Amble-Regular.ttf);
    font-style: normal;
    font-weight: 100;
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/**/

.intro{
    height:100vh;
    width:100%;
    margin-right: 20px;
    margin: auto;
    background: url("images/eye.jpg") no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
    opacity: 0.92;
}

.intro .inner{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content h1{
    color: var(--blue);
    font-size: 350%;
    margin: 0px 0px;
    text-align: center;
    text-transform: bold;
    font-family: milkshake;
    font-weight: 100;
}

#Rebecca{
    color: var(--purple);
}

#Bermingham{
    color: var(--lime);
}

.container{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
    margin-top: 50px;
}

.container a{
    border-radius: 9px;
    color: var(--black);
    font-size: 135%;
    padding: 10px 20px;
    text-decoration: none;
    border: solid var(--black) 5px;
    text-transform: uppercase;
    margin: 20px 40px;
    font-family: amble;
    font-weight: 150;
    font-style: bold;
}

/*Hover effects for 3 buttons*/

/*Left Button*/

.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--purple);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: var(--white);
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*Middle Button*/

.hvr-sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--lime);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
  color: var(--purple);
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* Right Button */

.hvr-sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--blue);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
  color: var(--black);
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*Instagram Icon*/

.fa {
  padding: 20px;
  font-size: 55px;
  width: 55px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  align-content: center;
}

.fa:hover{
    opacity:0.7;
}

.fa-instagram {
  background: var(--black);
  color: var(--white);
}

.footer {
  position: fixed;
   bottom: 0;
   width: 95px; 
   height: 100px;
   left: 50%; 
   margin-left: calc(-95px / 2); // here
}

可以在www.rebeccabm.github.io上查看当前的目标网页。任何帮助将不胜感激：）

由于

2 个答案:

答案 0 :(得分：1)

在每个断点使用的特定媒体查询中，每个范围应设置为/* Small Devices, Tablets */ @media only screen and (min-width : 768px) { .intro span {display:block;} } 。下面的示例应放在您的CSS中。请注意，最好以“Mobile First”为基础开始构建，否则您将需要重置大范围视图的范围。

android:text="@{@string/location(user.city,user.state)}"

答案 1 :(得分：1)

请使用bootstrap框架使用媒体查询css

即。 ： 适用于iPad @media和（max-width：767px）{

}

对于iPhone或任何小型媒体设备：

@media和（max-width：480px）{

}

相关问题
最新问题