个人中心
gpt4 book ai didi

css - 使用 CSS 的 javascript 操作调整大小

转载 作者：太空宇宙 更新时间：2023-11-04 11:04:34 25 4
gpt4 key购买 nike

我在使用 javascript 调整窗口大小时遇到​​了问题。

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

This is how the original image looks

This is how it resizes

This is how it resizes again 

//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>

最佳答案

您正在使用旧的解决方案来解决新问题。您可以尝试使用 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","");

关于css - 使用 CSS 的 javascript 操作调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34080013/

25 4 0
文章推荐： python - 以独立于平台的方式连接到 python 的 samba 共享？
文章推荐： python - 计算列表内的差异
文章推荐： python - GWT Request Builder 问题(同一站点策略问题？)
文章推荐： java - Springfox Swagger 'Whitelabel Error Page' :com. google.common.base.Predicate 无法解析
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com