html宽度不自动缩放,html – 网站的主体和元素卡在980px宽度上,不会缩小

您需要将其添加到HTML头中：

目前使用您的HTML和下面更新的CSS它对我来说很好,.templeHeader是响应性的中心.

Please see bottom of code snippet for more.

@import "bootstrap-sprockets";

@import "bootstrap";

@mixin center-both {

left: 50%;

top: 50%;

-webkit-transform: translate(-50%,-50%);

}

* {

margin:0; // It is a good idea to set these to zero at the start of

padding:0; // your css and add them to each element individually as required

}

.temple {

/* background-image: image-url("temple.jpg"); */

position: relative;

height: 500px;

background-color: black;

}

.templeHeader { //fixed this block where the curly braces were not properly defined

font-size: 52px;

color: white;

position: relative;

text-align: center;

@include center-both;

}

If you want the “Every tourist sees the temple” To not wrap onto multiple lines on smaller screens then use the following media query to change the font size at certain widths

@media screen and (max-width:640px) {

.templeHeader

{ font-size:8vw; } //this query will give you a nice responsive header all

// the way through varIoUs devices

}