我正在尝试在Rails应用程序顶部启动前端(仅HTML / CSS)页面,并且无法使用320px视口.有些元素不会缩小,我无法弄清楚原因.我已经通过Inspect Element给出了各种元素的最大宽度：100％;和/或宽度：100％;以及其他固定宽度,但有些事情是错误的.
的index.html
我在“太阳穴”里面有容器和行,因为我希望图像宽度为100％,而不是100％减去容器的边距.
layout.scss
@import "bootstrap-sprockets";
@import "bootstrap";
@mixin center-both {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.temple {
/* background-image: image-url("temple.jpg"); */
position: relative;
height: 500px;
background-color: black;
.templeHeader {
font-size: 52px;
color: white;
position: relative;
text-align: center;
@include center-both;
}
}
我怎样才能使.temple及其子节点的最大宽度为100％,以便.templeHeader在320px视口中正确居中？我觉得我错过了一些混乱的初始设置.
最佳答案
您需要将其添加到HTML头中：
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
目前使用您的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
}
