Question

我有一个单页滚动网站。问题是，当我在更大或更小的屏幕上检查网站时，文本对齐和15英寸屏幕是完美的。你可以看到预览（已删除链接）

尝试更改屏幕尺寸并检查文字对齐方式。我希望文本根据屏幕分辨率更改其位置。

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;
}

.logo
{
background-image:url('../images/logo.png');
background-repeat:no-repeat;
max-height:auto;
max-width:100% !important;
margin-left: auto;
margin-right: auto;
}

.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;
max-height:100%;
max-width:100%;
background-position:center;
min-height:100%;
min-width:100%;
}

.taste-div
{
padding-left:33%; 
width:23%;
text-align:justify;
padding-top:3%;
padding-bottom:8%;
display:block;  
color:#000;
font-family: Arial, 'Helvetica', sans-serif;
position: relative;
}

并且相关的HTML是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="keywords" content="" />
<meta name="author" content="Aamir Ali Bangash | ATOM Digital" />
<meta name="description" content="" />
<title>Sweet!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js"></script>
<script>
    $(document).ready(function() {

        // Dock the header to the top of the window when scrolled past the banner.
        // This is the default behavior.

        $('.header').scrollToFixed();



    });

    $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
</head>
    <body>
    <div class="banner">
    <div class="main" align="center"><a href="main.html"><img src="images/logo1.png" style="display:block;" border="0"></a></div>
    </div>
    <div class="header">
    <div class="main"><span class="title">
    <ul class="nav">
    <li><a href="main.html" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! TASTE</a></li>
    <li> | </li>
    <li><a href="#shaka" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! SHAKA</a></li>
    <li> | </li>
    <li><a href="#match" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! MATCH</a></li>
    <li> | </li>
    <li><a href="#hub" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! HUB</a></li>
    </ul>
    </span></div>
    </div>
<!-- taset page -->
    <div class="taste" id="taste">
    <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>
    <p>
    <h3>sweet! Red 75cl</h3>
    <strong>Description!</strong> 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<br />
    <strong>Grape variety!</strong> Blend of Merlot, Pinotage and Muscat d’Alexandrie<br />
    <strong>Alcohol!</strong> 13.5% by volume</p>
    </div>
    <div style="text-align:center;padding-bottom:10px;"><a href="#shaka"><img src="images/lb/bottom.png" border="0" /></a></div>
    </div>
    </div>

Answer 1

根据字体的屏幕尺寸想要达到的效果会有点困难。

我建议您使用media-queries结合字体大小单位rem和em

例如：

@media only screen and (max-width: 1024px) {

   body { font-size: 3rem; }

}

或者，您也可以使用查看端口，使用单位vw或vh作为字体

例如

body {
    font-size: 12px;
    font-size: 2.5vw; 
}

注意：在使用基于视频端口的排版时，您必须在标题中设置<meta name="viewport" content="width=device-width" /> ...

1vw = 1% of viewport width
1vh = 1% of viewport height

修改

在您提供的链接中，我能看到的唯一解决方案是使用media queries正确对齐文字!!

Answer 2

尝试在以下媒体查询中增加宽度

@media (max-width: 700px) {
.taste-div { 
 width: 65%;
}
}

因此小型设备的宽度会增加。

<强>更新

你唯一能做的就是制作另一款尺寸为19英寸显示器的媒体，比如

@media (min-width:1440px) {
.taste-div { 
 width: 30%; /*or what ever*/
}

然后您可以调整19英寸显示器的宽度。这不会影响其他尺寸。

响应式站点文本对齐

2 个答案: