使div内的文本以不同的分辨率响应

时间：2015-11-27 10:53:00

标签： javascript html css

我正在处理一个项目，其中包含一些内部带有文本的div，这可能是一个基本错误/要修复或要做的事情，但我没有找到如何做。

免费主机上的网站，以便您可以看到所有内容：http://tstsite.co.nf/该网站只能使用html / css正常运行。

当我调整窗口大小时，按钮上的文字和每边的三角形上的文字将超出并超出div，我该如何解决这个问题？

＆＃13;
＆＃13; 
html, body {
    height: 100%;
}

body {
    position: relative;
}

#anim {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/rxks29H.jpg");
  background-image: no-repeat;
  background-size: cover;
}

#anim img {
  position: relative;
  height: 100%;
  width: 100%;
}

 @font-face 
 { 
	font-family: 'big';
	src: url("../font/font.otf"); 
} 

.barra-cima {
	position: absolute;
	top:0;
	width: 100%;
	height: 20%;
}

.logo {
	margin-left: 4%;
	margin-top:4%;
	top: 0;
	position: absolute;
	width: 8%;
	height: 10%;
}

.login {
	margin-right: 4%;
	margin-top:4%;
	top: 0;
	position:absolute;
	right: 0;
	width: 6%;
	height: 8%;
}

.meio-pag1 {
	position: absolute;
	top: 0;
	margin-left: 25%;
	margin-right: 25%;
	width: 50%;
	height: 98%;
}

.tittle-meio {
	font-size: 60px;
	color: white;
	text-align: center;
	margin-left:7%;
	width: 90%;
	height: 30%;
	margin-top: 30%;
	font-family: big;
}

.holder {
	position:absolute;
	bottom: 17%;
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
}

.botoes-pag1 {
	height: 20%;
	width: 100%;
}

.btn_submit_form {
	width: auto;
    height: 45px;
	color: red;
    font-size: 14px!important;
}

.what_we_do {
	background-color: white;
}

.btn {
	bottom: 0;
	width: 49%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 200;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
	 font-family: 'big';
}

.hide {
    display: none;
}


.triangulo-esquerda {
  padding: 5% 15px;
  font-family: 'big';
  font-size: 23px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  left: 0;
  z-index: 3;
  top: 32%;
   cursor: pointer;
}

.triangulo-esquerda h2 {
	font-size: 23px;
	font-family: 'big';
	top: 20px;
}

.conteudo-esquerda {
	background-image: url("../img/f2.png");
    background-size: 100%;
	background-repeat: no-repeat;
	background-origin:content-box;
	padding-top: 70px;
	padding-left: 75px;
	padding-right:75px;
	padding-bottom: 50px;
	height: 600px;
    left: -500px;
    padding-top: 210px;
    position: absolute;
    top: -200px;
    width: 500px;
}

.conteudo-esquerda p {
	font-size: 10px;
	font-family: 'big';
}

.conteudo-direita {
	background-image: url("../img/f1.png");
    background-size: 100%;
	background-repeat: no-repeat;
	background-origin:content-box;
	padding-left: 75px;
	padding-right:75px;
	padding-bottom: 50px;
	text-align: right;
	 right: -500px;
    height: 600px;
    padding-top: 210px;
    position: absolute;
    top: -200px;
    width: 500px;
}

.triangulo-direita {
	font-family: 'big';
  font-size: 23px;
	 padding: 5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  right: 0;
  z-index: 3;
  top: 32%;
    cursor: pointer;
}

.triangulo-direita h2 {
	text-align: right;
	font-size: 20px;
	font-family: 'big';
	top: 20px;
}

.conteudo-direita p {
	font-size: 10px;
	font-family: 'big';
}
＆＃13; 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title> TST </title>
	
    <!-- Bootstrap -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<script src="js/js.js"></script>
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
   
<section id="anim">
  <img src="img/branquinho.png">
  
 
<div class ="logo">
	<img src="img/logo.png">
</div>
<div class ="login">
	<img src="img/login.png" class="image right">
</div>
  

  
  <div class ="meio-pag1">
	<div class ="tittle-meio">
			 IDEAS TURN INTO SUCESS	
	</div>
	
		<div class="holder">
			<button type="button" class="btn what what_we_do btn_submit_form" value="Open"> SUBMIT IDEA</button>
			<button type="button" class="btn what what_we_do btn_submit_form" value="Open"> JOIN OUR FUND</button>
		</div>
	</div>
  
      <div class="triangulo-esquerda">
		<span style="color: white">SCOUTING FOR COMPANIES</span>	
		<div class ="conteudo-esquerda" class="hide">
			<h2>SCOUTING <span style="color: red">INOVATION</span> FOR YOUR <span style="color: red">BUSINESS </span></h2>
			<br>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing
			elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis
			nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. Duis aute irure dolor.</p>
			<button type="button" class="btn2 what what_we_do btn_submit_form" value="Open"> SUBMIT IDEA </button>
		</div>
	  </div>
 
      <div class="triangulo-direita">
		<span style="color: white"> SEEKING FOR IDEAS </span>
			<div class ="conteudo-direita" class="hide">
				<h2> <span style="color: blue">IDEAS</span> IN DISRUPTIVE <span style="color: blue">IDEAS</span> ! HAVE ANY ? </h2>
			<br>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing
			elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis
			nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. Duis aute irure dolor.</p>
			<input type="submit" class="btn2 what what_we_do btn_submit_form" value="Open">
			</div>
	  </div>
	  
</section>

 </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

将此添加到您的头脑中：

public void testGc() {
    char c[] = new char[1024*1024*100] // Allocate 100M memory
    System.gc();
}

并使用mediaqueries：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

通过上面的示例，您可以添加不同的样式，以便在屏幕较小时覆盖默认值

相关问题
最新问题