0
У меня есть один прокручиваемый веб-сайт. проблема в том, что когда я проверяю веб-сайт на больших или меньших экранах, выравнивание текста и на 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>
Итак, что вы подразумеваете под «хотите, чтобы текст менял свое место в соответствии с разрешением экрана»? Поскольку я вижу, что ширина текста слишком мала, вы хотите увеличить ширину на маленьких экранах? –
yes Surjeet Я хочу, чтобы текст реагировал на все экраны и не менял его отступы сверху, снизу и слева. – Bangash