问使用CSS的javascript操作调整大小
EN

Stack Overflow用户

提问于 2015-12-04 10:37:56

回答 1查看 67关注 0票数 0

我遇到了一个使用javascript调整窗口大小的问题。

第一个图像显示了原始布局，第二个图像显示了窗口大小调整为较小的大小，第三个图像显示了将屏幕大小调整为原始大小时的问题。

//none used

* {
	font-family: 'Lato', sans-serif; ;
}


/* ########Elements below######## */
body {
	margin: auto;
	background-color: #22ee63;
}

header {
	background: linear-gradient(rgba(255,255,255,0.8) 60%,rgba(255,0,0,0));
}

td {
	padding: 0rem 0rem 0rem 0rem;
	
}

/* Resized Elements */

@media (min-width: 397px) {
	header {
		height: 4.5rem;
	}
}

@media (max-width: 397px) {
	header {
		height: 8.1rem;
	}
}
/* ########Classes below######## */

.card {
	background-image: url("Images/LibraryStudy.png");
	background-position: center;
}

/* Resized Classes */

@media (min-width: 397px) {
	.card {
		padding-bottom: 56.25%; /* Aspect Ratio 16:9*/
		width: 100%;
	}
}

@media (max-width: 397px) {
	.card {
		width: 100%;
		height: 18rem;
	}
}

/* ########IDs below######## */

#logo-container {
	width: 6.266rem;
}

#nav-logo {
	height: 2rem;
	width: 2rem;
	padding: 0.3125rem 0rem 0.3125rem 0.3125rem;
	float: left;
	display: inline;
}

#logo-container > h1 {
	display: inline;
	padding: 0.65625rem 0rem 0rem 0.65625rem;
	position: relative;
	font-size: 1.125rem;
	font-weight: 100;
}

#logo-container > h1 > a {
	text-decoration: none;
}

#login-form {
	padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
	width: 17rem;
}

#login-frame {
	vertical-align: top;
}

#login-text {
	/*-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 700;
	border-radius: .4rem;
	height: 1.1rem;*/

}

#persist-box {
	vertical-align: top;
}

#persist-text {
	font-size: 0.5rem;
	vertical-align: 0.2rem;
}

#password-recovery > a {
	font-size: 0.5rem;
	vertical-align: .2rem;
	padding-left: .2rem;
}

#first-card {
	z-index: -1;
	position: fixed;
	top: 0;
}

/* Resized IDs */

@media (min-width: 397px) {

	#logo-container {
		margin: ;
		display: inline;
	}

	#login-form {
		clear: ;
		display: inline;
		float: right;
		margin: ;
	}
}

@media (max-width: 397px) {

	#logo-container {
		margin: auto;
		display: block;
	}

	#login-form {
		clear: both;
		display: block;
		float: none;
		margin: auto;
	}
}
/* ########Pseudo below######## */
#password-recovery > a:link {
	color: black;
	text-decoration: none;
}

#password-recovery > a:visited {
	color: gray;
}

#password-recovery > a:hover {
	text-decoration: underline;
}

#logo-container > h1 > a:link {
	color: black;
}

#logo-container > h1 > a:visited {
	color: black;
}

#logo-container > h1 > a:hover {
	text-shadow: 0.01562rem 0.01562rem 0.0781rem #000000;
}

<!doctype html>
<html>
	<head>
		<!-- Meta -->
		<title>My CE Web App</title>
		<!-- Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700' rel='stylesheet' type='text/css'>
		<!-- CSS file -->
		<link type="text/css" rel="stylesheet" href="MyCELanding.css">
		<!-- JS files -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
		<script type='text/javascript' src='MyCE_scriptLanding.js'></script>
	</head>
	<body>
		<header>
			<div id="logo-container">
				<object type="image/svg+xml" id="nav-logo" data="Images/My_CE_Final_Icon.svg">Your browser does not support SVG</object>
				<h1> 
					<a href="/" id="header">My CE</a> 
				</h1>
			</div>
			<form id="login-form">
				<table cellspacing="0" role="presentation">
					<tbody>
							<tr>
								<td>
									<input type="email" name="email" placeholder="email" tabindex="1">
								</td>
								<td>
									<input type="password" name="password" placeholder="password" tabindex="2">
								</td>
								<td>
									<label id="login-frame" for="login-text">
										<input value="Log In" tabindex="4" id="login-text" type="submit">
									</label>
								</td>
							</tr>
							<tr>
								<td>
									<input id="persist-box" type="checkbox" name="persist-login" value="1" tabindex="3">
									<label for="persist-box" id="persist-text">
										Keep me logged in
									</label>
								</td>
								<td id="password-recovery">
									<a href="/">Forgot your password?</a>
								</td>
							</tr>
					</tbody>
				</table>
			</form>
		</header>
		<section id="first-card" class="card">

		</section>
	</body>
</html>

css

回答 1

Stack Overflow用户

发布于 2015-12-04 11:04:03

您正在使用较旧的解决方案来解决新问题。您可以尝试使用bootstrap吗？对于响应式的和许多常见的CSS/JS用户界面问题，它是一个令人惊叹的框架。

如果你能花两四个小时阅读网格和bootstrap (或其他css框架)中的许多令人惊叹的东西，你将节省数年的生产力。

关于当前问题，请在else {}中尝试：

$("header").css("height","")
$("#logo-container").css("margin","");
$("#logo-container").css("display","inline");
$("#login-form").css("clear","");
$("#login-form").css("display","inline");
$("#login-form").css("float","right");
$("#login-form").css("margin","");

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34080013

复制

相似问题

问使用CSS的javascript操作调整大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS的javascript操作调整大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS的javascript操作调整大小
EN