StackOverflow一直在帮助我，但现在这是我第一次问。我正在制作一个带引导程序的网站。在桌面上它很好，但是当我在我的iphone 4（或Chrome的F12）上测试时，它的内容不合适。
在这里
CSS
@charset "utf-8";
/* CSS Document */
/* MY CUSTOM CSS*/
/* ------------Bootstrap---------------*/
@media (max-width: @screen-xs) {
body{font-size: 10px;}
container-fluid fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
.fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
margin-top:20px;
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
.container-fluid{
padding:0;
}
body, html {
width: 100% !important;
height: 100% !important;
}
/* MENU SUPERIOR*/
.container-full {
margin: 0 auto;
width: 100%;
}
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
.brand{
color:#fff;
margin-left: 20px;
margin-top: 12px;
font-size: 1.3em;
float: left;
text-transform:uppercase;
}
#custom-bootstrap-menu .simbolo{
height:46px;
width:46px;
background:url(../img/logo-franken.png);
margin:5px auto 3px auto;
/*float:left;*/
}
#custom-bootstrap-menu .logotipo{
float:left;
color:#fff;
text-transform:uppercase;
font-weight:lighter;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 15px;
background-color: rgba(8, 3, 3, 1);
border-bottom-width: 0px;
margin:auto;
}
#custom-bootstrap-menu.navbar-default{
margin-left:0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
margin-left:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(173, 173, 173, 1);
background-color: rgba(0, 0, 0, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(116, 0, 158, 1);
background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #080303;
}
/****************HOME****************/
/*-------------DIVs------------/
/* ------------ HEADERS ----------*/
.titulo-inicial{
margin-top:20px;
font-size:5em;
text-align:center;
text-transform:uppercase;
}
/* -------------- PARAGRAFOS -------------*/
.texto-inicial{
margin-top:20px;
text-align:center;
font-size:1.5em;
}
/******************* FIM HOME *************************/
/****************SERVICOS****************/
/*-------------DIVs------------*/
.cont-servicos{
margin-left:20px;
margin-right:20px;
}
/* ------------ HEADERS ----------*/
.titulo-servicos{
margin-top:50px;
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM SERVICOS*************************/
/**************** PORTFOLIO ****************/
/*-------------DIVs------------*/
/*-------------CAROUSSEL------------*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
padding:0;
overflow:hidden;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill2 {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
overflow:hidden;
}
/* ------------ HEADERS ----------*/
.titulo-portfolio{
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM PORTFOLIO Protocolo unimed 1172425*************************/
/**************** ORCAMENTO ****************/
/******************* FIM ORCAMENTO *************************/
/**************** Contato ****************/
/******************* FIM Contato *************************/
/* ------------ COMUM ---------------*/
body {
margin: 0;
padding-top:104px;
font-family: 'Josefin Sans', sans-serif;
}
#logo-img {
width:70px;
height: 40px;
margin:auto;
}
#home {
background:#000;
}
#servicos {
background:#CCC;
}
#portfolio {
background:#F2F2F2;
}
#freelance {
background:yellow;
}
#contato {
background:purple;
}
.fullscreen-bg {
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
/* z-index: -100;*/
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: auto;
height: 100%;
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Company</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700,400italic,400' rel='stylesheet' type='text/css'>
<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Viewport Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid container-full">
<div class="simbolo"></div>
<!--<div class="logotipo">My Company</div>-->
</div>
<div class="navbar-header">
<div class="container-fluid">
<div class="brand visible-sm visible-xs" href="#">My Company</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
</div>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#home">Quem somos</a> </li>
<li><a class="page-scroll" href="#servicos">O que fazemos</a> </li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a> </li>
<!--<li><a href="#">Cases</a> </li>-->
<li><a class="page-scroll" href="#orcamento">Orçamento</a> </li>
<li><a class="page-scroll" href="#contato">Contato</a> </li>
<li><a class="page-scroll" href="#blog">Blog</a> </li>
</ul>
</div>
</div>
</div>
<div id="home" class="container-fluid fill">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="vids/video.mp4" type="video/mp4">
</video>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="titulo-inicial"> My Company </h1>
<p class="texto-inicial"> LoMy Companyr sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> </p>
</div>
</div>
</div>
</div>
<div id="servicos" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-servicos"> O que fazemos </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. </p>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-dg.png"> Design Gráfico </h2>
<p> Identidade Visual (Logotipo), Folders, Cartazes
</div>
<div class="col-md-4">
<h2><img src="img/ico-wd.png"> Web Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-de.png"> Design Editorial </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-ev.png"> Edição de Vídeo </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-3d.png"> Renderização 3D </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-ad.png"> Assessoria em Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio" class="container-fluid fill" style="padding:0;">
<header id="myCarousel" class="carousel slide" style="overflow:hidden;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/1.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/2.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/3.jpg)"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header>
</div>
<div id="orcamento" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-portfolio"> Orçamento </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst.. </p>
</div>
</div>
</div>
答案 0 :(得分：0)
this是否可以使用非常简单的东西。或者您可以参考此stackoverflow链接。
答案 1 :(得分：0)
你的CSS
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
只需从此处删除height:100%;。
建议使用Boostrap：
containers，row和col*'s的默认格式为
<div class="container"><!-- container-fluid can be used in this div -->
<div class="row">
<div class="col-md-12"><!--Your content that takes 12 columns goes here--></div>
</div>
<div class="row">
<div class="col-md-4"><!--Your content that takes 4 columns goes here--></div>
<div class="col-md-8"><!--Your content that takes 8 columns goes here--></div>
</div>
</div>
注意：所有列的row总和内部必须小于或等于12.如果大于12，则行中的最后一个元素（div，span等）将在其他元素下方可见同一行。