宽高等使用的是百分比 不是固定值 但是缩放浏览器还是会变形

我是洋葱啊 2017-07-04 10:37:37
   <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../common/commonInclude_css.jsp" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->

<!--<![endif]-->
<html lang="en" data-ng-app="login" id="ng-app">
<head>
<meta charset="utf-8" />
<title>PLC</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="" name="description" />
<meta content="" name="lxd" />
<link href="static/plugins/css/bootstrap.css" rel="stylesheet" />
<link href="static/css/style.css" rel="stylesheet" />
<link href="static/plugins/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="static/js/language/language.js"></script>
<script type="text/javascript" src="static/js/angular.js"></script>
<style type="text/css">
body,html{
height:100%;
width:100%;
}
.login-body .login-banner .logo {
background: rgba(0, 0, 0, 0) url("static/img/acheron_symbol2.png") no-repeat scroll 0 0;
float: left;
height: 24px;
margin: 3px 20px 0 70px;
width: 156px;
}
.login-body {
background: #393946 none repeat scroll 0 0;
min-height: 720px;
min-width: 1200px;
}
.login-body .login-banner {
height: 70px;
padding: 50px 0;
}
h1{
font-weight:normal;
}
.login-body .login-buttons {
background: #49a3ff none repeat scroll 0 0;
border: medium none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 24px;
height: 15%;
line-height:200%;
margin: 5% auto 5%;
padding: 0;
text-align: center;
transition: all 0.5s ease 0s;
width: 60%;
}
#page-container{
height:100%;
}
.login{
height:100%;
}
</style>
</head>
<body class=" login-body" data-ng-controller="LoginControl">
<!-- begin #page-loader -->
<div class="login-banner">
<!-- <a href="http://tp-link.com.cn/" target="_blank" style="">
<div class="logo"></div>
</a> -->
<h1 style="color:white;margin-left:120px;"class="brand">某某</h1>
</div>
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<div style="display:None" id="currentPage" >login</div>
<!-- end #page-loader -->
<!-- begin #page-container -->
<div id="page-container" class="fade">
<!-- begin login -->
<div class="login animated fadeInDown">
<!-- begin brand -->
<!-- <div class="login-header">
<div class="brand" style="min-width:500px;">
<img src="static/img/acheron_symbol2.png"/><span style="color:#333B44" id="product_Name" class="font-productName">某某某</span>
</div>
</div> -->
<!-- end brand -->
<div class="login-content">
<h1 style="font-size:26px;height:20%;">登录</h1>
<form class="margin-bottom-0" data-ng-submit="signupForm()" style="margin-top:10%;width:80%;height:100%;">
<div class="form-group m-b-20" style="height:40%;">
<input type="text" id="username" class="form-control input-lg font-secondLeve5" placeholder="用户名" data-ng-model="username"/>
</div>
<div class="form-group m-b-20" style="height:40%;">
<input type="password" id="password" class="form-control input-lg font-secondLeve5" placeholder="密码" data-ng-model="password" />
</div>


</form>
<div class="login-buttons" ng-click="signupForm()">
<span id="signIn" class="font-secondLeve2" >
登录
</span>
</div>
<div id="save_result" style="color:red; font-size:14px; line-height:34px;">
<!-- end page container --></div>
</div>
</div>
<!-- end login -->
</div>


<!-- ================== BEGIN BASE JS ================== -->
<script src="static/plugins/js/jquery-1.9.1.js"></script>
<script src="static/plugins/js/jquery-migrate-1.1.0.js"></script>
<script src="static/plugins/js/jquery-ui.js"></script>
<script src="static/plugins/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="{{=URL('static','crossbrowserjs/html5shiv.js')}}"></script>
<script src="{{=URL('static','crossbrowserjs/respond.min.js')}}"></script>
<script src="{{=URL('static','crossbrowserjs/excanvas.min.js')}}"></script>
<![endif]-->
<script src="static/plugins/js/jquery.slimscroll.js"></script>
<script src="tatic/plugins/js/jquery.cookie.js"></script>
<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="static/js/apps.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script src="static/js/login/LoginController.js"></script>
<script>
$(document).ready(function() {
App.init();
});
var jump = function() {
window.location.href = "pages/main/mainFrame.jsp";
}
</script>
</body>
</html>


浏览器100%的时候


浏览器67%的时候 用户名密码输入框明显变高了


菜鸟一枚,求各位大神帮忙解答
...全文
244 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
浪子回头8 2017-07-04
  • 打赏
  • 举报
回复
输入框宽度没必要用百分比,用固定值吧
半途流浪 2017-07-04
  • 打赏
  • 举报
回复
没必要使用太多的百分比,百分比结合像素,我认为div用百分比,其他内容大小用像素就行,慢慢调。
看着是个昵称 2017-07-04
  • 打赏
  • 举报
回复
输入框没必要这样做,这个宽度,写固定的就行
霜月枫桥 2017-07-04
  • 打赏
  • 举报
回复
使用固定值吧

61,114

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧