制作引导头文字
问题描述：
在较小的设备，title出去的画面。如果我重新加载页面，它看起来好一秒，然后溢出。有没有我没有考虑过的事情？制作引导头文字
我试图与文本和一个按钮全屏头，这是我迄今所做的：
/*body, html {
height: 100%;
}*/
body {
margin: 0px 0px;
}
#full {
background-image:url(https://chrisaam.files.wordpress.com/2015/03/wallpaper-2846361.jpg);
background-size:cover;
position: relative;
height:100vh;
}
.header {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
color: #fff;
font-size: 36px;
-ms-transform: translate(0,-50%); /* IE 9 */
-webkit-transform: translate(0,-50%); /* Safari */
transform: translate(0,-50%);
}<div id="full"> \t \t
<div class="header">
<h1 class="title">ACCENTOMETER</h1>
<button class="btn btn-default header-scroll">PLAY NOW</button>
</div>
</div>
答
在小型设备尝试加入山坳宽度此设备
<div id="full">
<div class="header col-sm-12 col-xs-12 " >
<h1 class="title col-xs-12">ACCENTOMETER</h1>
<button class="btn btn-default header-scroll col-xs-12">PLAY NOW</button>
</div>
</div>
答
您可以通过使用JavaScript以及CSS样式属性使标题响应。
首先，你需要让你的浏览器窗口的宽度。然后使用窗口宽度大小为responsive_font做适当的公式。
使用responsive_font你可以让你的标题响应。
例如：
function title_fontsize(){
var title=document.getElementById("mytitle");
var win_size=window.innerWidth;
responsive_font=win_size/(20)+"px";
title.style.fontSize=responsive_font;
}
答
CSS3支持新的尺寸是相对于查看端口。但是这在android <中无效4.4
您可以使用％或em的尺寸。只需更改基本字体大小，一切都会改变。这样字体大小会随着设备而改变。
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}
看所有的方式在https://*.com/a/21981859/406659
您也可以使用简单的媒体查询，以改变字体大小，用各自不同的屏幕尺寸。例如：
@media only screen and (max-width: 750px){
.title{
font-size: 30px;
}
}
您还可以使用视口宽度和视口高度。你可以检查Viewport Units了解更多详情。
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
我在手机上检查出它...它工作正常！ – JustCauseWhat
谢谢，当我使用移动视图时，它看起来很奇怪 –