我是网页设计的新手，正在为我的作品建立一个网站。我对如何正确构建这个照片库并将其放置在我需要的位置感到困惑。图库必须完美定位，因为它需要与充当图库图像框架的背景图像对齐。我基于 % 设计了这个，试图最终让它响应四个不同的屏幕尺寸范围。当我测试我到目前为止所拥有的东西时，它会在遇到不同的浏览器时分崩离析。它在dreamweaver的实时视图中运行良好，但是当我在任何浏览器中测试它时，背景图像不会显示，或者图像堆叠在页面的左侧，当我缩小屏幕时它根本没有响应. 我遇到的三个主要问题是 - 我怎样才能让背景图像显示出来并让画廊图像保持原位？当屏幕尺寸发生变化时，如何激活其他 CSS 文件？但是非常感谢任何和所有的帮助。
科林
这是HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
<title>Test</title>
<link rel"stylsheet" type="text/css" media="only screen and (min-width:769px;) and (max-width:1088px;)" href="../_css/large.css" />
<link rel"stylsheet" type="text/css" media="only screen and (min-width:449px;) and (max-width:768px;)" href="../_css/medium.css" />
<link rel"stylsheet" type="text/css" media="only screen and (min-width:252px;) and (max-width:448px;)" href="../_css/small.css" />
<link href="../_css/main_full.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page_container">
<div class="gallery_container">
<a href="#"><img id="pos1" src="../_images/galleryimages_full/sunlight_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos2" src="../_images/galleryimages_full/clownflat_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos3" src="../_images/galleryimages_full/goldensun_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos4" src="../_images/galleryimages_full/monstertheatre_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos5" src="../_images/galleryimages_full/home_smallvector.jpg" width="250" height="194" alt="© C.M.B"></a>
<a href="#"><img id="pos6" src="../_images/galleryimages_full/wishingstargallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos7" src="../_images/galleryimages_full/cozycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos8" src="../_images/galleryimages_full/coffeetable_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos9" src="../_images/galleryimages_full/breakaway_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos10" src="../_images/galleryimages_full/happyns_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos11" src="../_images/galleryimages_full/boymeetsgirl_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos12" src="../_images/galleryimages_full/sadbabygallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos13" src="../_images/galleryimages_full/salvation_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos14" src="../_images/galleryimages_full/orangestart_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos15" src="../_images/galleryimages_full/spaceobjectsgallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos16" src="../_images/galleryimages_full/clown_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos17" src="../_images/galleryimages_full/ponycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos18" src="../_images/galleryimages_full/pacha_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos19" src="../_images/galleryimages_full/goldstorm_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos20" src="../_images/galleryimages_full/qerogallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="#"><img id="pos21" src="../_images/galleryimages_full/theblues_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
</div>
</div>
</body>
</html>
这是主要的 CSS - 其他三个样式表是我尚未构建的媒体查询。
@charset "UTF-8";
/* CSS Document */
/* Layout (global rules for fullsize) */
.page_container {
width: 1280px;
height: 3000px;
background-image: url(../_page_components/gallery/gallery_full.jpg);
margin: 0% auto 0% auto;
position: relative;
/*padding-top: 19.541%; 248 pixels*/
}
.gallery_container {
width: 66.7%; /* 853 pixels */
height: 55.3%; /* 1659 pixels */
/*margin: 19.541% auto 0% auto; - equal to 248px*/
padding: 19.4% 0% 0% 0%;
margin: 0% auto 0% auto;
}
#pos1 { /* Top Left Corner*/
padding-left: 0.3%;
padding-right: 4.91%;
padding-bottom: 5.3%;
}
#pos2 { /* Middle top row */
padding-left: 0.42%;
padding-bottom: 5.3%;
}
#pos3 { /* Topr Right Corner */
padding-left: 5.35%;
padding-bottom: 5.3%;
}
#pos4 { /* The rest of the images/rows follow the same positioning pattern */
padding-left: 0.4%;
padding-right: 4.75%;
padding-bottom: 5.3%;
}
#pos5 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos6 {
padding-left: 5.15%;
padding-bottom: 5.3%;
padding-right: 0.2%;
}
#pos7 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.3%;
}
#pos8 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos9 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}
#pos10 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.3%;
}
#pos11 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos12 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}
#pos13 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.4%;
}
#pos14 {
padding-left: 0.5%;
padding-bottom: 5.4%;
}
#pos15 {
padding-left: 5.25%;
padding-bottom: 5.4%;
}
#pos16 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.6%;
}
#pos17 {
padding-left: 0.5%;
padding-bottom: 5.6%;
}
#pos18 {
padding-left: 5.25%;
padding-bottom: 5.6%;
}
#pos19 {
padding-left: 0.5%;
padding-right: 4.55%;
}
#pos20 {
padding-left: 0.5%;
}
#pos21 {
padding-left: 5.25%;
}
“大”屏幕的 CSS 媒体查询文件
@charset "UTF-8";
/* CSS Document */
/* Layout Large Screens*/
.page_container {
width: 1088px;
height: 2550px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_large.jpg);
}
“中等”屏幕的 CSS 媒体查询文件
@charset "UTF-8";
/* CSS Document */
/* Layout Medium Screens */
.page_container {
width: 768px;
height: 1800px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_medium.jpg);
}
“小”屏幕的 CSS 媒体查询文件
@charset "UTF-8";
/* CSS Document */
/* Layout Small Screens */
.page_container {
width: 448px;
height: 1050px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_small.jpg);
}