javascript - 使 div 中的文本在不同的分辨率下响应

标签 javascript html css

我正在处理一个元素，其中包含一些内部有文本的 div，这可能是一个基本错误/需要修复或要做的事情，但我不知道如何去做。

该站点位于免费主机上，因此您可以查看所有内容:http://tstsite.co.nf/该网站将无法仅使用 html/css 正常运行。

当我调整窗口大小时，按钮上的文本和每边的三 Angular 形上的文本将停留在 div 之外，我该如何解决这个问题？

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';
}
 <!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>

最佳答案

在你的脑海中添加这个:

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

并使用媒体查询:

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

}

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

关于javascript - 使 div 中的文本在不同的分辨率下响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33955802/

上一篇：html - 如何使用 CSS 应用渐变？

下一篇：css - 如何在 Customizr 主题中创建水平菜单？

相关文章：

javascript - 在 Actionscript3 和 Javascript 中使用代码

javascript - 从 JavaScript 二进制字符串创建 Blob 或文件会改变字节数？

php - 重新调整网页大小以适应访问者的显示器分辨率

javascript - 获取所有 ALT 标签

javascript - Firefox 中未对齐的 Bootstrap Carousel 图像

css - div 标签与动态扩展的侧边栏对齐

javascript - 如何将 Angular 和 Nodejs 安装在同一文件夹中

javascript - 如何用逗号而不是点来舍入价格？

html - Bootstrap 中导航和超大屏幕之间的差距

javascript - HTML5 自顶向下赛车游戏

©2024 IT工具网  联系我们