Question

＆＃13;

$('#pagepiling').pagepiling({
  verticalCentered: false,
  css3: false,
  sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
  onLeave: function(index, nextIndex, direction) {

    //fading out the txt of the leaving section
    $('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');

    //fading in the text of the destination (in case it was fadedOut)
    $('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');

    //reaching our last section? The one with our normal site?
    if (nextIndex == 4) {
      $('#arrow').hide();

      //fading out navigation bullets
      $('#pp-nav').fadeOut();

      $('#section4').find('.content').animate({
        top: '0%'
      }, 700, 'easeInQuart');
    }

    //leaving our last section? The one with our normal site?
    if (index == 4) {
      $('#arrow').show();

      //fadding in navigation bullets
      $('#pp-nav').fadeIn();

      $('#section4 .content').animate({
        top: '100%'
      }, 700, 'easeInQuart');
    }
  },
});

$('#arrow').click(function() {
  $.fn.pagepiling.moveSectionDown();
});

＆＃13;

#arrow{
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: 0;
    border: 0;
    outline: 0;
    z-index: 100;
    color: #BBB;
    background: transparent;
    -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    font: 36px Heiti, 'Lucida Grande', Arial;
    font-weight: bold;
}
#arrow span{
    display: inline-block;
    position: relative;
    top: -18px;
    -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#arrow:hover{
    background: #EC008C;
}
#arrow:hover span{
    top: 0;
    color: #FFF;
}
 #pp-nav li .active span, .pp-slidesNav .active span {
    background: #bbb;
}
#pp-nav span, .pp-slidesNav span {
    border-color: #bbb !important;
}
 .section {
    background-attachment: fixed;
    background-size: auto 80%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
#section1 {
    background-image: url('http://i.imgur.com/aVDvkXk.jpg?1');
	background-size: cover;
}

.intro {
    position: absolute;
    20px;
	bottom: 390px;
	color: #FFFFFF;
	
}
.intro h1 {
    font-size: 5em;
    font-weight: bold;
    color: #000;
	position: relative;
    left: -1px;
	top: 27px;
	
}
#section4 .intro {
    color: #000;
}
/* Content page
	 * --------------------------------------- */
 .header {
    padding-top: 80px;
    text-align: center;
}
.header h1 {
    font-size: 5em;
    font-weight: bold;
    color: #fff;
}
.header p {
    color: #f2f2f2;
    font-size: 1.7em;
	 
}
.page {
    width: 80%;
    margin: 60px auto;
    background:white;
    padding: 60px;
    -webkit-box-sizing: border-box;
    /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box;
    /* <=28 */
    box-sizing: border-box;
}
.page p {
    font-style: 12px;
    margin: 20px 0 0 0;
    line-height: 1.35em;
    color: #333;
	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
<button id="arrow">	<span>↓</span>

</button>
<div id="pagepiling">
    <div class="section" id="section1">
        <div class="intro">
            	<h1><font color="FFFFFF">HI</font></h1>
				
			<font size="4">
            I believe in pink. I believe that  <br/>
			laughing is the best calorie 
			burner. I believe in kissing,
			kissing a lot. I believe in being strong<br/>
			when everything seems
			to be going Wrong. I believe that
			happy girls are the prettiest girls.<br/>
			I believe that tomorrow is another day and I believe in miracles<br/>
			
        </div>
    </div>

＆＃13;

有谁知道如何修复这些图片和文字？因为当我已经完成了我的网站时，即使在我的19英寸显示器中的图片和文字中一切正常，但当我转移到另一台16英寸显示器时，我的文字与原始屏幕尺寸不同：（

different monitor sizes

here's my sample code

感谢那些想要帮助我的人！

Answer 1

你为intro：left添加了一个绝对值。这意味着如果屏幕变小，内容将被推到右边框上。添加左：30％宽度：70％位置：相对和显示：阻止到介绍元素，你很好：）

Answer 2

删除left: 620px; bottom: 390px;课程中的intro。并添加以下

.intro { right: 0px; max-width: 500px;}

Answer 3

尝试将字体大小从em更改为px，例如下面的

.intro h1 {
font-size: 5em to 80px; //remove 5em
font-weight: bold;
color: #000;
position: relative;
left: -1px;
top: 27px;
}

有谁知道如何修复这些图像和文字

3 个答案: