고정 너비 반응 형 페이지 디자인 방법

-1

현재 반응 형 페이지의 너비는 100 %로 골격을 사용하고 표준화합니다. 나는 디자인이 페이지의 한쪽 끝에서 다른 쪽 끝으로가는 눈물 때문에 고정 너비를 줄 때 잔소리를 계속하는 디자이너와 일하고 있습니다. 이러한 눈물의 디자인은 커브를 가지기 때문에 단지 반복 할 수는 없습니다.고정 너비 반응 형 페이지 디자인 방법

누군가이 아이디어를 어떻게 구현할 수 있습니까?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<!-- Basic Page Needs 
–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<meta charset="utf-8"> 
<meta http-equiv="cleartype" content="on" /> 
<title></title> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<!-- Mobile Specific Metas 
–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="MobileOptimized" content="width" /> 
<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=device-width" /> 


<!-- CSS 
–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<link rel="stylesheet" href="css/normalize.css"> 
<link rel="stylesheet" href="css/skeleton.css"> 
<link rel="stylesheet" href="css/common1.css"> 
</head> 
<body> 
<!-- Primary Page Layout 
–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<div id="wrapper"> 
    <div id="top" class="row"> 
     <div class="container"> 
      <div class="twelve columns">Header</div> 
     </div> 
    </div> 
    <div id="tear" class="row"> 
     <div class="container"> 
      <div class="twelve columns">tear</div> 
     </div> 
    </div> 
    <br /> 
    <div id="Credits" class="row"> 
     <div class="container"> 
      <div class="twelve columns">Footer</div> 
     </div> 
    </div> 
</div> 
<!-- End Document –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
</body> 
</html>

여기 common1.css에서 내 CSS입니다 :

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 

html, body{ 
height:100%; 
} 

#wrapper{ 
max-width: 1500px; // or whatever you need 
} 

#top { 
width: 1500px; 
background: #D9F3F3; 
border-bottom: 3px solid #50B848; 
padding: 8px; 
margin: 0px; 
font-weight: 700; 
color:#58595b; 
font-size: 16px; 
} 

.textRight { 
text-align: right; 
} 

#tear { 
width: 1500px; 
font-size: 16px; 
background-color: #1C6183; 
color: #ffffff; 
padding: 20px 10px; 
letter-spacing: 0.09em; 
border-top: 3px solid #50B848; 
position: absolute; 
background-image:url(../images/divider.png); 
background-repeat: no-repeat; 
background-position-x:right; 
background-position-y:center; 
background-position:right; 
background-size:auto; 
} 

#Credits { 
width: 1500px; 
font-size: 16px; 
background-color: #1C6183; 
color: #ffffff; 
padding: 20px 10px; 
letter-spacing: 0.09em; 
border-top: 3px solid #50B848; 
position: absolute; 
background-image:url(../images/wave-pattern--lg.png); 
background-repeat: no-repeat; 
background-position-x:right; 
background-position-y:center; 
background-position:right; 
background-size:auto; 
}

조

출처

2016-09-15 citm09

귀하의 코드없이이 질문은 널리 알려질 것입니다. –

umm'width : 1000px'를 사용하세요,'px'는 설정된 폭입니다 .... –

귀하의 범위는 광범위하지만, 내가 이해하고 있기를 바랍니다.

간단히 skeleton.css를 검색하여 960 시스템에서 빌드 된 것을 확인합니다. 형식은 960 픽셀 설정의 경우 이와 유사합니다.

<div class="container"> 
    <div class="sixteen columns">site content</div> 
</div>

또는 그 코드가 무엇이든 작동하지 않을 경우,

#wrapper{ 
    max-width: 1000px // or whatever you need 
}

지금 당신의 위치가보다 넓은되지 않습니다 추가, 래퍼 DIV (또는 동급)를 사용하지만,해야 여전히 작은 화면 크기로 조정합니다.

또한 눈물이 배경 이미지 인 경우 다음과 같이 작동 할 수도 있습니다.

class{ 
    background-image:url(path/to/tear.jpg); 
    background-size:cover; 
}

눈물 이미지가 중요하지 않은 다음 위의 코드는 브라우저의 오른쪽으로 왼쪽에서 스트레칭의 원인이됩니다,하지만 여전히 상하로 스크롤합니다 개별적으로 확장 할 수 있습니다. 이미지가 실제 너비보다 더 축소되지 않아야합니다. (나는 IE9 배경 크기 문제가있는 유일한 브라우저입니다 생각하지만,이 답변은 당신이 찾고있는하지 어떤 경우 http://www.w3schools.com/browsers/default.asp

에 따라 브라우저보다 0.3 %가 상세 정보를 추가합니다.

편집 : 코드에 따르면, 다음은 찢음에 표지를 사용하는 이미지입니다 (투명한 배경 png가있는 채우기로 png 사용). 래퍼 div는 최대 너비 1900px로 설정됩니다. 배경 브라우저는 ~ 1900px , 최상위 브라우저는 ~ 340px까지 축소되었으며, 눈물 눈금이 잘 맞습니다. 디자인에 맞는지 여부는 알 수 없습니다.

출처

2016-09-16 05:37:32 Sterner

나는 기존 페이지에서 코드를 가지고 있습니다. divider.jpg는 폭이 1500ps이며 디자인 방식대로 반복 할 수 없습니다. 그래서 나는 1500px 너비의 컨테이너를 가지고 있다고 생각합니다. 나 맞아? – citm09

표시하는 코드에서 나는 상단, 눈물 및 크레디트에서 1500px를 제거했습니다. 나는 래퍼에 상대적인 위치를 추가 했으므로 절대 div가 래퍼의 최대 너비로 제한됩니다. 이는 모든 것을 1500으로 제한하지만 축소시킵니다. 또한 나는 덮개라고 말했지만 background-size를 시도해보십시오. 눈물에. – Sterner

고정 너비 반응 형 페이지 디자인 방법

답변

관련 문제