如何设计一个固定宽度响应页面

-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 use'width：1000px'，'px'是一个设定的宽度.... –

你的范围很广，但我希望我的理解。

我简要地查了一下skeleton.css，看它是建立在960系统上的。格式看起来像960px设置。

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

另外，如果不与任何你的代码工作，使用包装股利（或同等学历），加入

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

现在，您的网站将不会比宽，但应仍然适应较小的屏幕尺寸。

此外，如果撕裂是背景图像，以下可能工作。

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

在您显示的代码中，我从顶部删除了1500像素，眼泪和积分。我添加了相对于包装器的位置，因此绝对div将限制它们的宽度为包装器的最大宽度。这将所有内容限制为1500，但让它们缩小。另外，我说封面，但尝试背景大小：包含;在眼泪。 – Sterner

如何设计一个固定宽度响应页面

回答

相关问题