-1
我正在制作一个网站，并且我遇到了一些问题。 当我用全尺寸窗口在浏览器上打开它时，它没有任何问题，但是，当我更改窗口的大小并使其变小时，文本消失，图像内容大小改变。当浏览器窗口调整大小时内容消失
必须是JavaScript或CSS的东西。如果你能看到解决这个问题的任何方法，请给我一个建议。
谢谢！
这里的HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet"
type="text/css" />
<script src="../css/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../css/SpryTabbedPanels.css" rel="stylesheet" type="text/css"
/>
<link rel='stylesheet' id='NextGEN-css' href='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0'
type='text/css' media='screen' />
<link rel='stylesheet' id='colorpicker.css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/colorpicker/css/colorpicker.css?ver=1.2'
type='text/css' media='all' />
<link rel='stylesheet' id='fancybox_css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox.css?ver=1.2'
type='text/css' media='all' />
<link rel='stylesheet' id='fancybox_thumb_css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox-thumbs.css?ver=1.2'
type='text/css' media='all' />
<link rel='stylesheet' id='grid_css-css' href='../css/grid.css' type='text/css'
media='all' />
<link rel='stylesheet' id='google_fonts-css' href='http://fonts.googleapis.com/css?family=Alice&ver=3.3.2'
type='text/css' media='all' />
<link rel='stylesheet' id='jquery.lightbox.min.css-css' href='http://www.markandlona.com/core/wp-content/plugins/wp-jquery-lightbox/styles/lightbox.min.css?ver=1.3.4'
type='text/css' media='all' />
<script type='text/javascript' src='http://www.markandlona.com/core/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.ui.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/colorpicker.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox.pack.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox-thumbs.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.easing.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.nivoslider.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.touchwipe.1.1.1.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.validate.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/browser.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.backstretch.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/hint.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.flip.min.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.mousewheel-3.0.6.pack.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.jplayer.min.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/kenburns.js?ver=1.2'></script>
<script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jwplayer.js?ver=1.2'></script>
<script type='text/javascript' src='../css/custom.js'></script>
<style type="text/css">
.post_header h2, h1, h2, h3, h4, h5 {
color: #222222;
}
.nav li a {
font-size:30px;
}
.nav li ul li a {
font-size:21px;
}
h1 {
font-size:40px;
}
h2 {
font-size:32px;
}
h3 {
font-size:26px;
}
h4 {
font-size:24px;
}
h5 {
font-size:22px;
}
h6 {
font-size:18px;
}
a {
color:#000000;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#nav_wrapper, #thin_nav, .post_date {
background: #ffffff;
overflow: visible;
position: absolute;
visibility: visible;
width: 310px;
}
input[type=submit], input[type=button], a.button {
background: #000000;
text-shadow: -1px 0 1px #333;
}
input[type=submit], input[type=button], a.button {
color: #ffffff;
}
input[type=submit]:hover, input[type=button]:hover, a.button:hover {
color: #ffffff;
}
input[type=submit], input[type=button], a.button {
border: 1px solid #111111;
}
.post_header h2, h1, h2, h3, h4, h5 {
color: #222222;
}
h1, h2, h3, h4, h5, h6, .nav li a, #kenburns_title, #kenburns_desc, .personal_contact h6 {
font-family:'Alice';
}
h1, h2, h3, h4, h5, h6, .nav li a, #gallery_title, #gallery_desc, .nav li a, .nav_page_number li {
text-transform: none;
}
.nav li a, .nav_page_number li {
color: #000000;
}
.nav li ul {
border-left: 1px solid #000000;
}
.nav li.current-menu-item > a, .nav li > a:hover, .nav li > a.hover, .nav li > a:active, .nav li.current-menu-parent > a, .nav li.current-menu-item ul li a:hover, .nav li ul li a:hover, .nav li ul li:hover a, .nav li ul li.current-menu-item a {
color: #ff8e01;
}
h1.menu_header, #footer {
color: #919191;
}
</style>
<link href="../css/screen.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-family: Dosis;
}
</style>
</head>
<body>
<!-- Begin logo -->
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper"> <a id="custom_logo" class="logo_wrapper" href="http://www.markandlona.com/core"><img src="../images/verrisgolf_small.jpg" alt="" width="151" height="42"/></a>
<ul
id="main_menu" class="nav">
<li id="menu-item-418" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-418"><a href="http://www.markandlona.com/core/">HOME</a>
</li>
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://www.markandlona.com/core/about">ABOUT</a>
</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.markandlona.com/core/visual">COLLECTIONS</a>
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://www.markandlona.com/core/visual/models">A/W 2012</a>
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://www.markandlona.com/core/visual/movie">S/S 2012</a>
</li>
</ul>
</li>
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.markandlona.com/core/product%ef%bc%8b">ARCHIVES</a>
<ul
class="sub-menu">
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://www.markandlona.com/core/product%ef%bc%8b/men">A/W 2011</a>
</li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.markandlona.com/core/product%ef%bc%8b/women">S/S 2011</a>
</li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://www.markandlona.com/core/product%ef%bc%8b/men">A/W 2010</a>
</li>
<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.markandlona.com/core/product%ef%bc%8b/women">S/S 2010</a>
</li>
</ul>
</li>
<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.markandlona.com/core/press%ef%bc%8b">BLOG</a>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://www.markandlona.com/core/news">ONLINE STORE</a>
</li>
<li id="menu-item-519" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-519"><a href="http://www.markandlona.com/core/shoplist">SHOP LIST</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
这里是我的JavaScript：
var $j = jQuery.noConflict();
/* jquery.imagefit
*
* Version 0.2 by Oliver Boermans <http://www.ollicle.com/eg/jquery/imagefit/>
*
* Extends jQuery <http://jquery.com>
*
*/
(function($) {
$.fn.imagefit = function(options) {
var fit = {
all : function(imgs){
imgs.each(function(){
fit.one(this);
})
},
one : function(img){
$(img)
.width('100%').each(function()
{
$(this).height(Math.round(
$(this).attr('startheight')*($(this).width()/$(this).attr('startwidth')))
);
})
}
};
this.each(function(){
var container = this;
// store list of contained images (excluding those in tables)
var imgs = $('img', container).not($("table img"));
// store initial dimensions on each image
imgs.each(function(){
$(this).attr('startwidth', $(this).width())
.attr('startheight', $(this).height())
.css('max-width', $(this).attr('startwidth')+"px");
fit.one(this);
});
// Re-adjust when window width is changed
$(window).bind('resize', function(){
fit.all(imgs);
});
});
return this;
};
})(jQuery);
$j.fn.getIndex = function(){
var $jp=$j(this).parent().children();
return $jp.index(this);
}
jQuery.fn.extend({
slideRight: function() {
return this.each(function() {
jQuery(this).show();
});
},
slideLeft: function() {
return this.each(function() {
jQuery(this).hide();
});
},
slideToggleWidth: function() {
return this.each(function() {
var el = jQuery(this);
if (el.css('display') == 'block') {
el.slideRight();
} else {
el.slideLeft();
}
});
}
});
$j.fn.setNav = function(){
$j('#main_menu li ul').css({display: 'none'});
$j('#main_menu li').each(function()
{
var $jsublist = $j(this).find('ul:first');
$j(this).hover(function()
{
$jsublist.css({opacity: 1});
$jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeIn(200, function()
{
$j(this).css({overflow:'visible', height:'auto', display: 'block'});
});
},
function()
{
$jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeOut(200, function()
{
$j(this).css({overflow:'visible', display:'none'});
});
});
});
$j('#main_menu li').each(function()
{
$j(this).hover(function()
{
$j(this).find('a:first').addClass('hover');
},
function()
{
$j(this).find('a:first').removeClass('hover');
});
});
$j('#menu_wrapper .nav ul li ul').css({display: 'none'});
$j('#menu_wrapper .nav ul li').each(function()
{
var $jsublist = $j(this).find('ul:first');
$j(this).hover(function()
{
$jsublist.css({opacity: 1});
$jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeIn(200, function()
{
$j(this).css({overflow:'visible', height:'auto', display: 'block'});
});
},
function()
{
$jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeOut(200, function()
{
$j(this).css({overflow:'visible', display:'none'});
});
});
});
$j('#menu_wrapper .nav ul li').each(function()
{
$j(this).hover(function()
{
$j(this).find('a:first').addClass('hover');
},
function()
{
$j(this).find('a:first').removeClass('hover');
});
});
}
$j(document).ready(function(){
$j(document).setNav();
$j('#thin_nav').mouseenter(
function() {
setTimeout(function() {
$j('#nav_wrapper').animate({"right": "0px"}, { duration: 300 });
$j(this).css('display', 'none');
}, 300);
}
);
$j('#nav_wrapper').mouseleave(
function() {
$j(this).animate({"right": "-250px"}, { duration: 300 });
$j('#thin_nav').css('display', 'block');
}
);
$j('#nav_wrapper').touchwipe({
wipeRight: function(){
$j('#nav_wrapper').animate({"right": "-250px"}, { duration: 300 });
$j('#thin_nav').css('display', 'block');
}
});
$j('#thin_nav').touchwipe({
wipeLeft: function(){
$j('#nav_wrapper').animate({"right": "0px"}, { duration: 300 });
$j('#thin_nav').css('display', 'none');
}
});
$j('.pp_gallery a').fancybox({
padding: 0,
overlayColor: '#000',
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: 0.9
});
$j('.flickr li a').fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.9,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 60,
height : 60
}
}
});
$j('a.fancy-gallery').fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.9,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 60,
height : 60
}
}
});
$j('.img_frame').fancybox({
padding: 0,
overlayColor: '#000',
overlayOpacity: 0.9
});
$j('.lightbox_youtube').fancybox({
padding: 0,
overlayColor: '#000',
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: 0.9,
scrolling: 'no'
});
$j('.lightbox_vimeo').fancybox({
padding: 0,
overlayColor: '#000',
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: 0.9,
scrolling: 'no'
});
$j('.project_single').fancybox({
padding: 0,
overlayColor: '#000',
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: 0.9,
scrolling: 'no'
});
$j('input[title!=""]').hint();
$j('textarea[title!=""]').hint();
$j('.one_fourth.gallery4').hover(
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'185px',
'top':'0px',
'left':'0px'
}, 400);
},
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'200px',
'top':'0px',
'left':'0px'
}, 400);
}
);
$j('.one_third.gallery3').hover(
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'240px',
'top':'0px',
'left':'0px'
}, 400);
},
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'260px',
'top':'0px',
'left':'0px'
}, 400);
}
);
$j('.one_half.gallery2').hover(
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'320px',
'top':'0px',
'left':'0px'
}, 400);
},
function(){
var $jthis = $j(this);
$jthis.children('a').children('img').stop().animate({
'height':'340px',
'top':'0px',
'left':'0px'
}, 400);
}
);
//Firefoxがフリーズするのでブロック
//$j('.post_img').hover(
// function(){
// var $jthis = $j(this);
// $jthis.children('a').children('img').stop().animate({
// 'height':'250px',
// 'top':'0px',
// 'left':'0px'
// }, 400);
// },
// function(){
// var $jthis = $j(this);
// $jthis.children('a').children('img').stop().animate({
// 'height':'260px',
// 'top':'0px',
// 'left':'0px'
// }, 400);
// }
// );
//$j('.post_img').click(
// function(event){
// $j(this).children('a').trigger('click');
// }
// );
var calScreenHeight = $j(window).height()-108;
$j('#page_content_wrapper').css('top', '0px');
setTimeout(function() {
$j('#menu_wrapper').fadeIn();
$j('#jp_interface_1').fadeIn();
$j('#controls').fadeIn();
$j('#page_content_wrapper').fadeIn();
$j('.page_control').fadeIn();
$j('#page_maximize').trigger('click');
$j('#tray-button').trigger('click');
}, 1012);
var miniRightPos = 1012;
$j('#page_minimize').click(function(){
var calScreenHeight = $j(window).height()-120;
$j(this).css('display', 'none');
$j('#page_maximize').css('display', 'block');
$j('#page_content_wrapper').animate({ 'left': -miniRightPos+'px' }, 200);
$j('.page_control').animate({ 'left': '332px' }, 0);
$j('.personal_contact').fadeOut('slow');
$j('.gallery_social').fadeOut('slow');
$j('#kenburns_title').fadeIn('slow');
$j('#kenburns_desc').fadeIn('slow');
});
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-120;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ 'left': '332px' }, 400);
$j('.page_control').animate({ 'left': miniRightPos+'px' }, 400);
$j('.personal_contact').fadeIn('slow');
$j('.gallery_social').fadeIn('slow');
$j('#kenburns_title').fadeOut('slow');
$j('#kenburns_desc').fadeOut('slow');
});
// Create the dropdown base
$j("<select />").appendTo("#menu_border_wrapper");
// Create default option "Go to..."
$j("<option />", {
"selected": "selected",
"value" : "",
"text" : "- Main Menu -"
}).appendTo("#menu_border_wrapper select");
// Populate dropdown with menu items
$j(".nav li").each(function() {
var current_item = $j(this).hasClass('current-menu-item');
var el = $j(this).children('a');
var menu_text = el.text();
if($j(this).parent('ul.sub-menu').length > 0)
{
menu_text = "- "+menu_text;
$j('ul.sub-menu li').css('display', 'block');
}
if($j(this).parent('ul.sub-menu').parent('li').parent('ul.sub-menu').length > 0)
{
menu_text = el.text();
menu_text = "- - "+menu_text;
}
if(current_item)
{
$j("<option />", {
"selected": "selected",
"value" : el.attr("href"),
"text" : menu_text
}).appendTo("#menu_border_wrapper select");
}
else
{
$j("<option />", {
"value" : el.attr("href"),
"text" : menu_text
}).appendTo("#menu_border_wrapper select");
}
});
$j("#menu_border_wrapper select").change(function() {
window.location = $j(this).find("option:selected").val();
});
// $j('.sub-menu').touchwipe({
// wipeRight: function(){
// $j('.sub-menu').animate({"left": "0px"}, { duration: 300 });
// $j('ul.sub-menu').css('display', 'block');
// }
// });
//
});
当然你会开玩笑。 –
Yikes：阅读本文http://developer.yahoo.com/performance/rules.html#num_http – epascarello
没有人会看到100行代码，并且当你使用100个插件时。你必须缩小它的范围。 – epascarello