我一直在努力让我的页面响应，但似乎无法实现。当我使用inspect元素进行检查时，页面会有响应，但当我使用手机时，页面不会重新缩放。谁能告诉我出了什么问题吗。我似乎没有反应，因为翻盖卡。
这是html:
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div class="happy-birthday">
<h1> happy birthday </h1>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="front.jpg">
</div>
<div class="card-side-shadow">
<img src="card_shadow.png">
</div>
<div class="flip-card-back">
<img src="back.jpg">
</div>
</div>
</div>
</body>
</html>
这是CSS：
@font-face
{
font-family: 'cervanttisregular';
src: url('cervanttis-webfont.woff2') format('woff2'),
url('cervanttis-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.happy-birthday
{
text-align: center;
color: pink;
font-family: 'cervanttisregular';
}
.flip-card
{
text-align: center;
width: 960px;
margin: 0px auto;
}
.flip-card-inner
{
position: relative;
transition: transform 1.0s;
transform-style: preserve-3d;
}
.flip-card-back
{
transform: rotateY(180deg);
z-index: 1;
}
.card-side-shadow
{
opacity: 1;
right: 312px;
}
.flip-card-back, .flip-card-front, .card-side-shadow
{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card:hover .flip-card-inner
{
transform: rotateY(180deg);
}
@media screen and (max-width: 959px)
{
.happy-birthday
{
width: 100%;
}
.flip-card
{
width: 100%;
}
.flip-card-inner
{
width: 100%;
}
.flip-card-front
{
width: 100%;
}
.flip-card-back
{
width: 100%;
}
.card-side-shadow
{
width: 100%;
}
}
@media screen and (max-width: 640px)
{
.happy-birthday
{
width: 100%;
}
.flip-card
{
width: 100%;
}
.flip-card-inner
{
width: 100%;
}
.flip-card-front
{
width: 100%;
}
.flip-card-back
{
width: 100%;
}
.card-side-shadow
{
width: 100%;
}
}
请帮忙。谢谢
这是一个响应示例。你可以用你喜欢的方式改变它。
首先，img必须使用height: auto;进行响应。然后，通过使用@media断点，翻转卡的宽度不会超过浏览器视图的宽度。margin: 0px auto;将使卡片在页面上水平居中。
字体"sans-serif"；如果woff2/woff文件不在，则已作为回退添加到字体家族中。
如果你从css中删除所有@media部分，那么图像将是全宽
更新Safari不支持不带前缀的backface-visibility:hidden-webkit-因此这是在选择器处添加的：翻转卡背面，翻转卡正面
@font-face {
font-family: 'cervanttisregular';
src: url('cervanttis-webfont.woff2') format('woff2'),
url('cervanttis-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.happy-birthday {
text-align: center;
color: pink;
font-family: 'cervanttisregular', sans-serif;
}
.flip-card {
text-align: center;
width: 100%;
margin: 0px auto;
}
@media (min-width: 576px) {
.flip-card {
width: 540px;
}
}
@media (min-width: 768px) {
.flip-card {
width: 730px;
}
}
@media (min-width: 992px) {
.flip-card {
width: 960px;
}
}
.flip-card-inner {
position: relative;
transition: transform 1.0s;
transform-style: preserve-3d;
}
.flip-card-inner img {
vertical-align: middle;
width: 100%;
height: auto;
border: 0;
}
.flip-card-back {
transform: rotateY(180deg);
z-index: 1;
}
.card-side-shadow {
opacity: 1;
}
.flip-card-back,
.flip-card-front,
.card-side-shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}<div class="happy-birthday">
<h1> happy birthday </h1>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://dummyimage.com/600x400/9cc/fff.jpg" alt="">
</div>
<div class="flip-card-back">
<img src="https://dummyimage.com/600x400/cc9/fff.jpg" alt="">
</div>
</div>
</div>头部看起来像这个
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>