반응 형 스타일링

Question

나는 그들을 개발 중이며 홈페이지는 고정 된 머리글과 바닥 글과 내용과 이미지를 포함한 중간에 수직 슬라이더로 구성되어 있습니다. 나는 응답 성이있는 웹 사이트를 구축하고 있지만 화면의 크기가 조정되면 세로 슬라이더의 내용이 잘 리게됩니다 (이미지는 잊어 버리십시오 - 제목과 텍스트가있는 상자 만). 주 cont가 항상 머리글 아래와 바닥 글에서 시작되도록하려면 어떻게해야합니까? 여기

은의 JS 바이올린입니다 내가 얘기하고있다 : http://jsfiddle.net/tdWb9/

일부 CSS :

@charset "UTF-8"; 
/* CSS Document */ 

* { 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
} 


    /* Style for our header texts 
    * --------------------------------------- */ 
    h1{ 
     font-size: 4em; 
     color: #fff; 
     margin:0; 
     padding :0; 
    } 

html,body{ 
    margin: 0; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
} 
.home-button { 
    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc; 
    box-shadow:inset 0px 1px 0px 0px #cae3fc; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #00baf2)); 
    background:-moz-linear-gradient(center top, #79bbff 5%, #00baf2 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#00baf2'); 
    background-color:#79bbff; 
    -webkit-border-top-left-radius:10px; 
    -moz-border-radius-topleft:10px; 
    border-top-left-radius:10px; 
    -webkit-border-top-right-radius:10px; 
    -moz-border-radius-topright:10px; 
    border-top-right-radius:10px; 
    -webkit-border-bottom-right-radius:10px; 
    -moz-border-radius-bottomright:10px; 
    border-bottom-right-radius:10px; 
    -webkit-border-bottom-left-radius:10px; 
    -moz-border-radius-bottomleft:10px; 
    border-bottom-left-radius:10px; 
    text-indent:0; 
    border:1px solid #469df5; 
    display:inline-block; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:17px; 
    font-weight:bold; 
    font-style:normal; 
    height:38px; 
    line-height:38px; 
    width:128px; 
    text-decoration:none; 
    text-align:center; 
    text-shadow:1px 1px 0px #287ace; 
} 
.home-button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00baf2), color-stop(1, #79bbff)); 
    background:-moz-linear-gradient(center top, #00baf2 5%, #79bbff 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00baf2', endColorstr='#79bbff'); 
    background-color:#00baf2; 
}.home-button:active { 
    position:relative; 
    top:1px; 
} 

.home-button h3{ 
text-align:center; 
} 

.intro{ 
background-color: rgba(255, 255, 255, 0.8); 
width:30%; 
border-radius:10px; 
padding-bottom:20px; 
padding-left:3%; 
padding-right:3%; 
margin-left:10%; 
} 

.intro2{ 
      background-color:white; 
      width:30%; 
      border-radius:10px; 
opacity:0.8; 
filter:alpha(opacity=80); 
padding-bottom:20px; 
margin-right:10%; 
float:right; 
} 

    .intro h1, .intro2 h1{ 
    color:black; 
    padding-top:3%; 
     } 

    .intro p, .intro2 p{ 
     color: black; 
    } 

    /* Centered texts in each section 
    * --------------------------------------- */ 
    .section{ 
     text-align:left; 
    } 

    /* Backgrounds will cover all the section 
    * --------------------------------------- */ 
    #section0, 
    #section1, 
    #section2, 
    #section3{ 
     background-size: cover; 
    } 

    /* Defining each sectino background and styles 
    * --------------------------------------- */ 
    #section0{ 
     background-image: url(images/image1.jpg); 
    } 


    #section2{ 
     background-image: url(images/image2.jpg); 
    } 
    #section3{ 
     background-image: url(images/image3.jpg); 
    } 

    /* Overwriting styles for control arrows for slides 
    * --------------------------------------- */ 
    .controlArrow.prev { 
     left: 50px; 
    } 
    .controlArrow.next{ 
     right: 50px; 
    } 

    /* Fixed header and footer. 
    * --------------------------------------- */ 
    #header, #footer{ 
    display:block; 
    width: 100%; 
    background: #05556d; 
    text-align:center; 
    color: #f2f2f2; 
} 
#footer{ 
    padding:10px 0px; 
    font-size:12px; 
} 
.home #header, .home #footer{ 
    position:fixed; 
    z-index:9; 
} 
.home #header{ 
    top:0px; 
} 
.home #footer{ 
    bottom:0px; 
} 

#footer a{ 
     color:#00baf2; 
    } 

    #footer-other{ 
     z-index:9999; 
     width: 100%; 
     background: #05556d; 
     text-align:center; 
     color: #f2f2f2; 
    } 

    #footer-other{ 
     padding:10px 0px; 
     font-size:12px; 
    } 

#footer-other a{ 
     color:#00baf2; 
    } 

    /* Bottom menu 
    * --------------------------------------- */ 
    #infoMenu { 
     bottom: 80px; 
    } 
    #infoMenu li a { 
     color: #fff; 
     z-index: 999; 
    } 

    *Main Menu CSS*/ 
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); 
#cssmenu {padding: 0; margin: 0; border: 0;} 
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;} 
#cssmenu ul {position: relative; z-index: 597; } 
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;} 
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;} 
#cssmenu ul ul li {float: none;} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } 
#cssmenu ul li:hover > ul { visibility: visible;} 
#cssmenu ul ul {bottom: 0; left: 0;} 
#cssmenu ul ul {margin-top: 0; } 
#cssmenu ul ul li {font-weight: normal;} 
#cssmenu a { display: block; line-height: 1em; text-decoration: none; } 

#cssmenu { 
    background: #05556d; 
    border-bottom: 4px solid #00baf2; 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
    font-size: 16px; 
} 

    #cssmenu > ul { *display: inline-block; } 

    #cssmenu:after, #cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

#cssmenu a { 
    background: #05556d; 
    color: #CBCBCB; 
    padding: 0 20px; 
} 
#cssmenu ul { text-transform: uppercase; } 

    #cssmenu ul ul { 
     border-top: 4px solid #1b9bff; 
     text-transform: none; 
     min-width: 190px; 
} 
     #cssmenu ul ul a { 
     background: #1b9bff; 
     color: #FFF; 
     border: 1px solid #0082e7; 
     border-top: 0 none; 
     line-height: 150%; 
     padding: 16px 20px; 
} 
     #cssmenu ul ul ul { border-top: 0 none; } 

     #cssmenu ul ul li { position: relative } 

#cssmenu > ul > li > a { line-height: 80px; } 

#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; } 
     #cssmenu ul ul li:hover > a { background: #00baf2; } 

     #cssmenu ul ul li:last-child > a { 
      border-radius: 0 0 3px 3px; 
      box-shadow: 0 1px 0 #1b9bff; 
} 
     #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; } 

     #cssmenu ul ul li.has-sub > a:after { 
      content: '+'; 
      position: absolute; 
      top: 50%; 
      right: 15px; 
      margin-top: -8px; 
} 

#cssmenu ul li:hover > a, #cssmenu ul li.current-menu-item > a { 
     background: #00baf2; 
     color: #FFF; 
} 
    #cssmenu ul li.has-sub > a:after { 
     content: '+'; 
     margin-left: 5px; 
} 

#down{display:none} 

    #cssmenu ul li.last ul { 
     left: auto; 
     right: 0; 
} 
     #cssmenu ul li.last ul ul { 
     left: auto; 
     right: 99.5%; 
} 

.logo{ 
    margin-top:5px; 
    float:left; 
    margin-left:20%; 
    padding-right:10px; 
    position:relative; 
    z-index:10000; 

} 

@Media screen and (max-width:480px) { 

.intro{ 
width:70%; 
margin-top:20%; 
} 

.intro h1, .intro2 h1{ 
    color:black; 
    padding-top:3%; 
     } 

    .intro p, .intro2 p{ 
     color: black; 
    } 

.main-container{ 
width:85% !important; 
} 

    #sbs{position: absolute; 
width: 20px; 
padding: 8px; 
cursor:pointer; 
height: 20px; 
border: 0px solid white; 
border-radius: 5px; 
top: 5px; 
left: 10px;} 


    .sb{width: 100%; 
height: 4px; 
display: inline-block; 
border-bottom: 2px solid white; 
float: left; 
clear: both;} 
    #down{cursor:pointer;display:table;width:350px; margin:0 auto; margin-bottom:10px; text-align:center;padding: 15px 0px; background: #00baf2; color: white;margin-top: 10px;position:relative;} 

    #cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;} 
#cssmenu { 
width: 87%; 
display: table; 
margin: 0 auto; 
} 
     #down + #cssmenu { display: none;} 
     #down.open + #cssmenu { display: block;} 
    .logo{margin:0;padding:0;width: 100%;text-align: center;margin-bottom:10px;} 
    #cssmenu .logo > a{margin:0;padding:0} 
#cssmenu ul li { display: block ; width: 100% ; text-align:center; } 
#cssmenu > ul > li > a { line-height: 50px; } 
#cssmenu ul ul { 
border-top: 4px solid #1b9bff; 
text-transform: none; 
width: 100%; 
/* float: left; */ 
} 
#cssmenu ul ul ul {display:none;} 
#cssmenu .has-sub:hover > ul { 
border-top: 0 none; 
visibility:visible; 
display: block; 
float: left; 
clear: both; 
position:relative; 
right: 0; 
} 
     #cssmenu ul li.hover, #cssmenu ul li:hover{ 
      display:inline-block; 
     } 
.content1{font-size:100%;} 

} 
} 

@Media screen and (max-width:768px) { 
.logo{ margin-left:10%;} 
} 

.login{ 
    background-color:#00baf2; 
    width:5%; 
    margin-right:10%; 
    margin-top:-60px;; 
    float:right; 
    padding:10px 10px 10px 10px; 
    } 

.main-container{ 
    width:60%; 
    height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top:3%; 
} 

.imgsection{ 
    float:left; 
    padding-right:5%; 
    } 

.main-container img{ 
    max-width:100% !important; 
    height:auto; 
    display:block; 
} 

Answer 1

슬라이더이기 때문에 그래서 페이지에서 텍스트 못해 발 때문에 모두에게 어렵다

p {font-size:82%} 

: 당신이 더 많은 텍스트를 보려면 아래로 당겨 때 다음 슬라이더, 에 내가 찾아 더 simpliest가이 CSS 코드를 추가하는 것입니다 할 수있는 가장 좋은 방법이 변경됩니다 0

또는 100 %로 폰트 크기를 유지하려는 경우 당신은 사업부 스크롤하게이 CSS 코드를 추가하여 작업을 수행 할 수 있습니다

.section{ 
height:55%; 
overflow-y: scroll; 
overflow-x: hidden; 
} 
.intro{ 
height:55%; 
overflow-y: scroll; 
overflow-x: hidden; 
} 

난 당신이 모바일 마우스를 드래그로 스크롤이 잘 작동합니다 생각을 다음 슬라이드로 변경하는 것과 충돌없이 텍스트 영역에 삽입 할 수 있지만 모바일에서 테스트하지 않기 때문에 확신 할 수는 없지만 테스트를 수행 할 수는 있습니다.

또는 마지막 수단으로 작은 로고를 만들고 메뉴의 왼쪽에 넣고 머리글 크기를 줄일 수 있습니다.

감사합니다.