Css 响应式站点文本对齐_Css_Text_Alignment_Screens

Css 响应式站点文本对齐

css text

Css 响应式站点文本对齐,css,text,alignment,screens,Css,Text,Alignment,Screens,我有一个单页滚动网站。问题是，当我在较大或较小的屏幕上查看网站时，文本对齐和15英寸的屏幕是完美的。您可以在以下位置查看预览：（链接已删除）尝试更改屏幕大小并检查文本对齐。我希望文本根据屏幕分辨率更改其位置 CSS是 html { height: 100%; } body { margin:0; padding:0; background-image:url('../images/bgs/bg.jpg'); background-repeat:no-repeat; background

我有一个单页滚动网站。问题是，当我在较大或较小的屏幕上查看网站时，文本对齐和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>


含糖的
$（文档）.ready（函数（）{
//滚动过横幅时，将标题停靠在窗口顶部。
//这是默认行为。
$（'.header'）.scrollToFixed（）；
});
$（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});


|

|

|


每个人都喜欢甜味，易于饮用的葡萄酒，充满了味道、果味和乐趣。
好极了！白色75毫升
描述甜桃和杏的果香，略带荔枝和柑橘的味道。成熟，果香浓郁，令人耳目一新

起源南非西开普省

葡萄品种白藜芦、赛美蓉和亚历山大麝香葡萄酒的混合物

酒精12%（按体积计）

含糖的红色75cl
描述甜的红莓和黑浆果味道，略带热带水果和摩卡香料的味道。口感顺滑，易于饮用，口感更浓。
起源南非西开普省

葡萄品种梅洛、皮诺塔奇和亚历山大麝香葡萄酒的混合

酒精13.5%（按体积计）

根据字体的屏幕大小，您想要实现的目标将有点困难
我建议您将
媒体查询
与字体大小单位
rem
和
em
例如：

@media only screen and (max-width: 1024px) { body { font-size: 3rem; } }
或者，您也可以使用查看端口，为字体使用unit
vw
或
vh
例如

body { font-size: 12px; font-size: 2.5vw; }
注意：使用这种基于查看端口的排版时，必须在标题中设置

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

在您提供的链接中，我能看到的唯一解决方案是使用正确对齐文本
尝试在以下媒体查询中增加宽度

@media (max-width: 700px) { .taste-div { width: 65%; } }
因此，在小型设备上，宽度将增加
更新
您唯一能做的就是创建另一个19英寸显示器大小的媒体，如

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

然后您可以调整19英寸显示器的宽度。这不会影响其他尺寸
问题不是字体soze bro。问题在于文本的静态位置。我希望它移动根据屏幕大小。我已经添加了头部html以及供您参考。请查收that@Bangash：使用媒体查询mate…这是唯一的解决方案，请检查“我的编辑”部分中的链接以查看标准中断-point@NoobEditor当我在较小的屏幕上进行检查时，媒体查询已经存在。那么，您所说的
是什么意思？您希望文本根据屏幕分辨率改变其位置？正如我看到的，文本的宽度太小了，你想增加小屏幕的宽度吗？是的，我希望文本在所有屏幕上都有响应，而不是从顶部改变其填充，底部和左侧。谢谢Surjeet，但是文本仍然是静态的，它没有根据屏幕分辨率对齐。您所说的根据屏幕分辨率对齐是什么意思？您想要所有分辨率的全宽吗？当您更改屏幕分辨率时，我希望文本与15英寸屏幕一样正确对齐。不多也不少。现在看起来和你想象的一样。你能用两张截图解释一下吗？这会更好地理解。这里是15英寸屏幕上的截图链接，在19英寸屏幕上检查两幅图像的对齐情况。