창 크기 조정시 텍스트가 숨김

제공된 템플릿을 기반으로 클래스 용 웹 사이트를 만들고 있는데 창 크기가 조정됨에 따라 텍스트가 이동하도록 고심하고 있습니다 (지금은 창 크기 조정 중). 텍스트 및 관련 버튼을 모호하게 함).창 크기 조정시 텍스트가 숨김

이상적으로는 페이지의 크기가 조정됨에 따라 텍스트/단추 및 확장명으로 이미지의 오른쪽 하단 모서리에 초점을 유지하는 방식으로 페이지를 고정시키고 싶습니다. 여기

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

     <meta name="viewport" content="width=device-width, inital-scale=1.0"> 
<!-- This tells mobile devices not to zoom out the page, start with scale=1 --> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css"> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/grid.css"> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css"> 
     <link rel="stylesheet", type="text/css", href="Resources/css/style.css"> 
     <link rel="stylesheet", type="text/css", href="Resources/css/queries.css"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'> 

     <title>Whitetail Acres Tree Farm</title> 
    </head> 
    <body> 
     <header> 
      <nav> 
       <div class="row"> 
        <img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo"> 
        <ul class="main-nav"> 
         <li><a href="#features">Food Delivery</a></li> 
         <li><a href="#meals">How it Works</a></li> 
         <li><a href="#steps">Our Cities</a></li> 
         <li><a href="#cities">Sign up</a></li> 
        </ul> 
        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a> 
       </div> 
      </nav> 
      <div class="hero-text-box"> 
       <h1>Schedule <br> Your Visit!</h1>  
       <a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a> 
       <a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a> 
      </div> 
     </header>

그리고 내 CSS는 다음과 같습니다 : 당신이 행의 폭을 정의 havent 한 것처럼

/* Universal Reset*/ 
*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html 
{ 
    background-color: #ffffff; 
    color: #555; 
    font-family: 'Lato', 'Arial', sans-serif; 
    font-size: 20px; 
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
} 

.clearfix {zoom: 1} 
.clearfix:after { 
    content: '.'; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

header{ 
    background-image: url(img/hero.jpg); 
    background-size: cover; 
    background-position:bottom, right; 
    height: 100vh; 
    background-attachment:inherit; 
} 

.hero-text-box{ 
    position: absolute; 
    width:1080px; 
    top:80%; 
    left:55%; 
    text-align: right; 
    transform: translate(-50%, -50%); 
} 

.row{ 
    max-width: 1140px; 
    margin:0 auto; 
} 

section{ 
    padding: 80px 0; 
} 

.box{ 

    padding: 1%;

출처

2017-11-13 J Pop

이 보이는

여기 내 HTML입니다. 내가 웹 응용 프로그램을 수행 할 때

.row{ 
max-width: 1140px; 
width: 100%; 
margin:0 auto; 
}

출처

2017-11-13 20:08:55

내가 부트 스트랩을 사용하는 사랑 : 같은 것을보십시오. 그것은 나에게 어떤 스크린 크기로든 필요한 것을 할 수있는 반응 형 프론트 엔드를 만드는 데 도움이되는 상자 밖의 CSS 클래스를 제공한다. 간단히 말해, 미디어 쿼리, 부트 스트랩 레이아웃 그리드 또는이 둘의 조합을 사용합니다.

YouTube에는 많은 자습서가 있습니다. 이 사람은 부트 스트랩 레이아웃 그리드의 기본 원리를 보여줍니다. https://youtu.be/GDwWmrpCa30

미디어 쿼리는 현재 장치 화면 크기에 따라 다른 작업을 수행해야 할 때 유용합니다. 이것은 부트 스트랩을 필요로하지 않고 사용할 수 있지만, 반응이 빠른 앱을 만들기 위해 부트 스트랩과 함께 사용할 수도 있습니다. 또한 youtube에는 셀 수없는 튜토리얼이 있지만 여기서는 체크 아웃하는 것이 좋습니다.

미디어 쿼리 예 https://youtu.be/2KL-z9A56SQ :

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { 
    //css goes here with whatever css you want to fire at this threshold 
}

은 도움이 더 필요하시면 알려주세요. 행운을 빕니다.

출처

2017-11-13 20:10:28

절대적으로 배치 된 요소에 정확한 너비를 설정하면 브라우저 크기에 관계없이 너비가 그대로 유지됩니다.

.hero-text-box{ 
 
    position: absolute; 
 
    top:80%; 
 
    left: 49%; 
 
    text-align: right; 
 
    transform: translate(-50%, -50%); 
 
    max-width: 1080px; 
 
    width: 100%; 
 
}

또한 왼쪽 값 때문에 화면 밖으로 이동하여 변환 규칙의 50 % 미만이어야한다.

출처

2017-11-13 20:16:11 pjones235

답변

관련 문제