我有一个单页滚动网站。问题是，当我在更大或更小的屏幕上检查网站时，文本对齐方式在 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>
最佳答案
你想根据屏幕尺寸实现的字体会有点困难。
我建议你使用 media-queries结合字体大小单位 rem和 em
例如:
@media only screen and (max-width: 1024px) {
body { font-size: 3rem; }
}
或者，为了您的舒适，您也可以使用视口(viewport)，使用单元 vw或 vh对于字体
例如
body {
font-size: 12px;
font-size: 2.5vw;
}
注意:您必须设置 <meta name="viewport" content="width=device-width" />在使用这种基于视口(viewport)的排版时在标题中...
1vw = 1% of viewport width
1vh = 1% of viewport height
编辑
在您提供的链接中，我能看到的唯一解决方案是使用 media queries正确对齐文本!!
关于css - 响应式网站文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20877277/