Question

我是网络开发的新手。我在我的预览服务器上创建了一个单页面网站，可以看到（Lin删除）

文本填充未在所有屏幕尺寸中正确设置。如何设置它以使其变得敏感。

品味页面的CSS代码是

html {
height: 100%;
}
body
{
margin:0;
padding:0;  
background-image:url('../images/bgs/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height:100%;
max-width:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale')";
font-family:Trebuchet MS, Arial, 'Helvetica', sans-serif;
font-size:1em;
}
.header
{
background-color:#212528;
}
.taste
{
background-image:url('../images/bgs/bg2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
max-height:100%;
max-width:100%;
background-position:center;
}
.taste-div
{
padding-left:26em; 
width:18.750em;
text-align:justify;
padding-top:1.7em;
padding-bottom:9em;
display:block;  
color:#000;
font-family: Arial, 'Helvetica', sans-serif;
}

@font-face {
font-family: "Bebas";
src: url("../fonts/BebasNeue.eot") format("eot"),
url("../fonts/BebasNeue.woff") format("woff"),
url("../fonts/BebasNeue.ttf") format("truetype");
}

.banner {
background-color: #2a2f33;
margin-right:auto;
margin-left:auto;
padding-top:1%;
}
.title {
font-size: 110%;
font-weight: bold;
font-family:'Bebas';
display:block;
}
.title a {
color:#fff;
text-decoration:none;   
}
.header {
background-color: #2a2f33;
padding: 10px;
}
.nav{
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family:'Bebas';
font-size:1.9em;
}
.nav li{
display:inline;
color:#fff;
}
.nav a{
display:inline-block;
padding-left:0.4em;
padding-right:0.4em;
}
.nav hover{
color:#cc8568;
}

和html是

<div class="taste-div">
Everyone is loving the sweet taste, easy drinking wines packed with flavour,  fruitiness and fun.</td>
<p><h3>sweet! White 75cl</h3>
<strong>Description!</strong> Sweet peach and apricot fruit flavours with a hint of lychee and tangy citrus. Ripe, fruity and very refreshing. <br />
<strong>Origin!</strong> Western Cape, South Africa<br />
<strong>Grape variety!</strong> Blend of Chenin Blanc, Semillon and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 12% by volume</p>
sweet! Red 75cl
Description! Sweet red and black berry flavours with a hint of tropical fruit and mocha spice. Smooth, easy-drinking and moreish. Origin! Western Cape, South Africa
Grape variety! Blend of Merlot, Pinotage and Muscat d’Alexandrie
Alcohol! 13.5% by volume
</div>

Answer 1

我建议您使用Twitter Bootstrap，这将有助于您的生活。并使开发尽可能快。 http://getbootstrap.com/2.3.2/

Answer 2

有些代码没有发布，因为你有导航栏的响应式css（由于800的最大宽度为1，而大于801的最小宽度，因此也存在问题，所以你在中间有一个缺口，没有应用规则）。要弄清楚如何使网站的其余部分响应，请在解决该问题后使用您自己的导航栏作为示例。

Answer 3

伙计，你的问题是因为你正在进行响应式设计，你必须以百分比形式填充和填充，而不是px或em。

请查看您的style.css文件，并将padding-left从26em更改为40％。并在需要时使用媒体查询。

Answer 4

简单的答案是，使用 CSS3的媒体查询。

您可以在此处了解有关他们的更多信息：

Answer 5

我的文字列表和彩色背景（如方框）也有类似的问题。盒子/列表项目在平板电脑大小中不能正确排列。它只是将边框大小从pt更改为%。这就行了！

响应式网站文本对齐问题

5 个答案: