网页像素使用不正确

时间：2017-06-29 18:31:40

标签： html css 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/******* RESET FINISHED BEYOND THIS POINT ******/

#header{
	background-color:#2098D1;
	color:white;
	padding-top:30px;

}

.group-wrapper{
	width:60%;
	margin:0 auto;
	overflow:hidden;
	position:relative;

	
}

.logo-name{
	line-height:1.4;
	display:inline-block;
	vertical-align: middle;
	font-family:arial;
	position:relative;
	float:left;
}

.logo-name h1{
	font-size:20px;
	text-transform: uppercase;

}

.logo-name h2{
	font-size:15px;
	font-weight:normal;

}

#nav{
	float:right;
	

}

#nav ul{
	float:right;
	width:100%;
	font-family:arial;


}

#nav ul li{
	display:inline-block;
	margin-right:10px;
	font-size: 15px;
}


.intro-company{
	background-color:#2098D1;
	color:white;
	padding-top:30px;
	height:250px;
}

.group-center{
	width: 60%;
	margin:0 auto;
	position:relative;
	text-align:center;
	margin-top:30px;
}


.group-center h1{
	font-size:48px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:23px;
	margin-top:20px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:13px;
	margin-top:30px;
}


.content-wrapper{
	width:70%;
	margin:0 auto;
}

.main-content h1{
	text-align:center;
	font-family:Arial;
	font-size:50px;	
}

.main-content span{
	font-weight: bold;
	color:#2098D1;
}

.content-wrapper{
	overflow:hidden;
	margin-top:50px;
}
.content-wrapper img{
	float:left;
	
}

.main-content{
	overflow:hidden;
}

.content-wrapper p{
	margin-top:20px;
	width:75%;
	margin-left:25%;
	line-height: 1.3em;
	font-family:arial;
	text-align:center;
	font-size:20px;
}

.my-skills{
	background-color:#2098D1;
}

.skills-wrapper{
	width:70%;
	margin:0 auto;
	margin-top:40px;
	color:white;
}

.my-skills h1{
	font-size:50px;
	margin-top:40px;
	text-align:center;
	font-family:arial;

}

.my-skills ul{
	text-align:center;

}
.my-skills ul li{
	text-align:center;
	list-style-type: none;
	display:inline-block;
}







/****** MEDIA QUERIES ******/





/****** SCREEN: 1115PX ******/
@media screen and (max-width: 1115px) {
#nav{
	float:none;

}

#nav ul{
	float:none;
}

#nav ul li{
	display:inline-block;
	margin-right:10px;
	font-size: 10px;
	
	

}

.group-wrapper{
	width:70%;
	margin:0 auto;
	text-align:center;
	
	position:relative;
}

.group-center h1{
	font-size:45px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:22.5px;
	margin-top:18px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:13.5px;
	margin-top:27px;

}

.logo-name{
	display:none;
}   

}



/****** SCREEN: 1115PX ******/
@media screen and (max-width: 705px) {



.group-center h1{
	font-size:40px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:19.5px;
	margin-top:18px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:11px;
	margin-top:27px;

}

.logo-name{
	display:none;
}
  
}


/****** SCREEN: 1115PX ******/
@media screen and (max-width: 609px) {



.group-center h1{
	font-size:35px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:16.5px;
	margin-top:18px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:9px;
	margin-top:27px;

}

.logo-name{
	display:none;
}


	
   
}


/****** SCREEN: 1115PX ******/
@media screen and (max-width: 609px) {

.group-center h1{
	font-size:30px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:13.5px;
	margin-top:18px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:7px;
	margin-top:27px;

}

.logo-name{
	display:none;
}  
}
<title>My website</title>
</head>

<body>

<header id = "header">
	<div class = "group-wrapper">
		<div class = "logo-name">
			<h1>NAME HERE</h1>
			<h2> INFO HERE</h2>
		</div>

		<nav id = "nav">
			<ul>
				<li>ABOUT</li>
				<li>PORTFOLIO</li>
				<li>TESTIMONIALS</li>
				<li>ARTICLES</li>
				<li>HIRE JAMES</li>
			</ul>
		</nav>

	</div>
</header>

<div class = "intro-company">
	<div class = "group-center">
		<h1>WordPress / Front-end Developer</h1>
		<h2>Producing high quality responsive websites and exceptional user experience</h2>
		<h3>VIEW PORTFOLIO</h3>
	</div>
</div>

我已经从使用 '％' 转换为 'px'* ，我有点麻烦。我发现百分比变得更容易，你知道它适合每个屏幕，因为百分比是相对于单个视口的。

然而，当我使用 'px' 时，我发现自己并没有真正理解它们代表什么。例如，我现在正在创建一个投资组合网站 - 我只是上半部分，它看起来相当不错。但是我显然没有正确使用像素，因为当屏幕减少了一半的宽度切断时。

代码段完全展示了我的意思。

tml, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/******* RESET FINISHED BEYOND THIS POINT ******/

#header{
	background-color:#2098D1;
	color:white;
	padding-top:30px;
}

.group-wrapper{
	width: 1120px;
	margin:0 auto;
	
	position:relative;
	
}

.logo-name{
	line-height:1.4;
	display:inline-block;
	vertical-align: middle;
	font-family:arial;
}

.logo-name h1{
	font-size:20px;
	text-transform: uppercase;
	margin-right:30px;

}

.logo-name h2{
	font-size:15px;
	font-weight:normal;
	margin-right:30px;
}

#nav{
	float:right;
	position:relative;
	margin-left:120px;
}

#nav ul{
	float:right;
	width:100%;
	font-family:arial;


}

#nav ul li{
	display:inline-block;
	margin-right:10px;
	font-size: 15px;
}


.intro-company{
	background-color:#2098D1;
	color:white;
	padding-top:30px;
	height:250px;
}

.group-center{
	width: 1120px;
	margin:0 auto;
	position:relative;
	text-align:center;
	margin-top:30px;

}

.group-center h1{
	font-size:50px;
	font-family:arial;
}

.group-center h2{
	font-family:arial;
	font-weight:normal;
	font-size:25px;
	margin-top:20px;
}

.group-center h3{
	font-family:arial;
	font-weight:bold;
	font-size:15px;
	margin-top:30px;

}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
	<meta charset=utf-8>
	<title>My website</title>
</head>

<body>

<header id = "header">
	<div class = "group-wrapper">
		<div class = "logo-name">
			<h1>Name</h1>
			<h2> Some information</h2>
		</div>

		<nav id = "nav">
			<ul>
				<li>ABOUT</li>
				<li>PORTFOLIO</li>
				<li>TESTIMONIALS</li>
				<li>ARTICLES</li>
				<li>HIRE JAMES</li>
			</ul>
		</nav>

	</div>
</header>

<div class = "intro-company">
	<div class = "group-center">
		<h1>WordPress / Front-end Developer</h1>
		<h2>Producing high quality responsive websites and exceptional user experience</h2>
		<h3>VIEW PORTFOLIO</h3>
	</div>
</div>

</body>

</html>

3 个答案:

答案 0 :(得分：1)

使用像素（ px ）的问题在于，无论屏幕尺寸如何，它都不会改变。百分比（％）考虑屏幕的宽度并相应地调整元素的大小。

例如：假设您有以下代码

<body>
  <div style="width: 50%;">
    <p>The width of this div will be 50% of the width of the body</p>
  </div>
</body>

如果主体的宽度是1000px，那么div的宽度将是500px，因为500是1000的一半（或1000/2 = 500）。如果将div的宽度设置为500 px ，则它将始终保持在500px，即使正文的宽度小于500px。

从.group-wrapper和.group-center类中删除width属性就可以解决这个问题。

.group-wrapper {
margin:0 auto;
position:relative;
}

.group-center{
margin:0 auto;
position:relative;
text-align:center;
margin-top:30px;
}

同样适用于height属性。当您将屏幕/窗口调整为手机大小时，.intro-company类的高度不会增加，因为您将其高度设置为250px。删除height: 250px;也可以解决此问题。

您可以简单地删除height: 250px;的原因是因为高度总是会增加以适应其中的内容。

将.intro-company代码修改为：

.intro-company{
background-color:#2098D1;
color:white;
padding-top:30px;
}

编辑：我只是想指出，当您为手机等小屏幕开发网站/网页时，您应该在代码中的某处添加此代码

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

仔细观察，width=device-width使页面的宽度与屏幕宽度的宽度保持一致。 initial-scale=1.0设置浏览器的缩放级别。

可在此处找到更多信息https://www.w3schools.com/css/css_rwd_viewport.asp

答案 1 :(得分：0)

百分比非常好，可以快速简便地构建，但我仍然一直使用px。当你想要一个定义的，不变的大小时，它们非常有用。您可以选择是采用响应式设计还是自适应设计。我选择了具有响应性和自适应性的混合设计。像徽标一样的东西保持相同的大小，直到你移动到移动然后他们按下到更小的尺寸。像网格这样的其他东西很好被设置为％

例如，假设您在父div中包含了三个框：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

你希望他们都是33.333333333（经常性）％calc函数有一个更简单的方法：

.child {
  width: calc(100% / 3);
  display: inline-block;
  font-size: 18px;
}

稍微要做到这一点，有时你必须将父divs font-size设置为0，然后将font-size设置回你希望它在子div中的任何内容。

答案 2 :(得分：0)

许多设计师会说你走错了方向 - 趋势已经远离从固定单位如像素和走向相对单位如{{ 1}}，%和vw。这是出于你所说的确切原因：固定单位可能会使设计在屏幕上看起来很完美，但在任何其他屏幕尺寸上，可能看起来很糟糕。随着屏幕尺寸的差异扩大，它只会变得更糟 - 想想手机和平板电脑。

另一方面，使用相对单位需要花费更多精力。使用像素创建像素完美的布局相对简单;创建一个响应式设计，在视口大小之间平滑过渡需要更多的工作，技能，并且通常需要大量的试验和错误。当然，好处是它在不同的视口大小中并没有完全分崩离析。

相关问题
最新问题