Как сделать так, чтобы это выглядело одинаково на всех устройствах? - PullRequest
Новая
       88

Как сделать так, чтобы это выглядело одинаково на всех устройствах?

1 голос
/ 08 мая 2020

У меня вопрос. Я работаю над веб-сайтом для своего дипломного проекта. Я хочу, чтобы он работал на каждом устройстве. На полноэкранном режиме ноутбука это работает, но как только я изменяю размер экрана или посещаю его на своем телефоне, веб-сайт не прокручивается или создает своего рода сбой. Я хочу, чтобы все изображения были полноразмерными, без пробелов между ними на каждом устройстве и для плавной прокрутки. Мой дизайн ниже, так что вы можете понять, что я имею в виду.

Здесь вы можете видеть, что в небольшом превью уже есть пробелы между изображениями, потому что он меньше, чем полноэкранный ноутбук.

С уважением, Роланд 

@charset "UTF-8";
/* CSS Document */

	h2 {
	font-family: 'Niveau Grotesk Regular';
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	color: #383838;
	position:fixed;
	text-align: center;
	align-items: center;
	bottom: auto;
	z-index: 6;
	rotate: 90deg;
		}
	body,td,th {
    font-family: 'Niveau Grotesk Regular';
    font-style: normal;
    font-weight: 400;
	align-content: center;
    color: #000000;
    font-size: 35px;
}
	h1,a{
	font-family: 'Niveau Grotesk Regular';
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	text-align: center;
	align-items: center;
	border-left-width: thick;
	color: #000000;
	z-index: 6;
	rotate: 90deg;
		}	

.colorbox {
	position: fixed;
}

	#cboxLoadedContent {
  	background: #ffffff;
	position:fixed;
}
	#outline {
	position: fixed;
	color: #000000;
		}

			h3{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    margin: 0;
    padding: 0;
    color:#000000;
	align-content: center;
	background-color: #FFFFFF;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	position: static;
}
div#content {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

#box {
    position: relative;
    vertical-align:top;
    width: 100%;
    height: 575px;
    margin: 0;
    padding: 0;
}

.black {
    background: black;
}

.white {
    background: grey;
}

div#up-left {
	position: absolute;
	z-index:4;
    left: 0;
    top: 0px;
    width: 50%;
    margin: 0;
    padding: 0;
}

div#down-right {
	position: fixed;
    bottom: 0px;
    z-index: 5;
    left: 50%;
    width: 50%;
    margin: 0;
    padding: 0;
}

img {
	width: 100%;
}

body::-webkit-scrollbar {
  display: none;
}
<html><head>
<meta charset="UTF-8">
<title>No legs to ground us</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="jquery.colorbox.js"></script>
	<script src="jquery.colorbox-min.js"></script>
	<link href="No legs to ground us.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://use.typekit.net/lma1fez.css">
	<link href="colorbox.css" rel="stylesheet" type="text/css">
	<style>
  @import url("https://use.typekit.net/lma1fez.css");
</style>
	</head>
	<div id="main-content-desktop"></div>
	<div class="top" role="main">
			<span>
				<h2>
				&nbsp;
				<a href="Context.html" title="Link to poetry"> TEXT </a>
				&nbsp;
				<a href="Video.html" title="Link to video"> VIDEO </a>
				&nbsp;
				<a href="Grid.html" title="Link to Image grid"> GRID </a>
				&nbsp;
				<a href="No legs to ground us.html" title="Link to same page"> PROJECT </a>
				&nbsp;
				<a href="index.htm" title="Link to main website"> ROELANDLENOIR.com </a>
				&nbsp;
				</h2>
	  </span>
		</div>

<body>
<div id="content">
    <div id="up-left">
        <div id="box">
			 <img src="http://roelandlenoir.com/NLTGU/Baukekopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Benen.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Bloemkopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Brug.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Dawit.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Kijker.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Schaken.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Spoorweg.jpg">
        </div>
    </div>
    <div id="down-right">
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Kwal.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Lamp%20Trein.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Maxkopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Metro%20mankopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Metrokopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Plantenkopie.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Suzankopie.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Teije2kopie.jpg">
        </div>
    </div>
</div>
		
<script>
	
    var num_children = $('#up-left').children().length;
	console.log(num_children);
	// Aantal childs: 6
    var child_height = $('#up-left').height() / num_children;
	console.log(child_height);
	// Hoogte van de boxen: 400px
    var half_way = num_children * child_height / 2;
	console.log(half_way);
	// De helft van het scherm: 1200px
    $(window).scrollTop(half_way);
	// Scrollen naar de helft van het scherm
    var ul = '#up-left'; 
    var dr = '#down-right'; 
    function crisscross() {
        $(ul).css('bottom', '-' + window.scrollY + 'px');
        $(dr).css('bottom', '-' + window.scrollY + 'px');
        var ulc = $(ul).children();
        var drc = $(dr).children();
        var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
		// Naar beneden scrollen
        if (window.scrollY > half_way + child_height) {
			$(window).scrollTop(half_way + child_height);
			//Wacht 10ms totdat het scrollen klaar is
			setTimeout(function (){
				corners[2].appendTo(ul);    
				corners[0].prependTo(dr);
            }, 5);
        } else if (window.scrollY < half_way - child_height) {
            $(window).scrollTop(half_way - child_height);
			//Wacht 10ms totdat het scrollen klaar is
			setTimeout(function (){
				corners[1].appendTo(dr);
				corners[3].prependTo(ul);
			}, 5);
        }
    }
    $(window).scroll(crisscross);
</script>
</body>
</html>

1 Ответ

0 голосов
/ 08 мая 2020

Используйте max-height: 575px; вместо height: 575px; внутри # box {} . Также добавьте display: grid;

Пожалуйста, запустите его в полноэкранном режиме и измените размер окна, чтобы увидеть изменения. 

@charset "UTF-8";
/* CSS Document */

	h2 {
	font-family: 'Niveau Grotesk Regular';
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	color: #383838;
	position:fixed;
	text-align: center;
	align-items: center;
	bottom: auto;
	z-index: 6;
	rotate: 90deg;
		}
	body,td,th {
    font-family: 'Niveau Grotesk Regular';
    font-style: normal;
    font-weight: 400;
	align-content: center;
    color: #000000;
    font-size: 35px;
}
	h1,a{
	font-family: 'Niveau Grotesk Regular';
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	text-align: center;
	align-items: center;
	border-left-width: thick;
	color: #000000;
	z-index: 6;
	rotate: 90deg;
		}	

.colorbox {
	position: fixed;
}

	#cboxLoadedContent {
  	background: #ffffff;
	position:fixed;
}
	#outline {
	position: fixed;
	color: #000000;
		}

			h3{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    margin: 0;
    padding: 0;
    color:#000000;
	align-content: center;
	background-color: #FFFFFF;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	position: static;
}
div#content {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

#box {
position: relative;
display:grid;
vertical-align: top;
width: 100%;
max-height: 575px;
margin: 0;
padding: 0;

}

.black {
    background: black;
}

.white {
    background: grey;
}

div#up-left {
	position: absolute;
	z-index:4;
    left: 0;
    top: 0px;
    width: 50%;
    margin: 0;
    padding: 0;
}

div#down-right {
	position: fixed;
    bottom: 0px;
    z-index: 5;
    left: 50%;
    width: 50%;
    margin: 0;
    padding: 0;
}

body {
    scroll-behavior: smooth;
}

img {
	width: 100%;
}

body::-webkit-scrollbar {
  display: none;
}
<html><head>
<meta charset="UTF-8">
<title>No legs to ground us</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="jquery.colorbox.js"></script>
	<script src="jquery.colorbox-min.js"></script>
	<link href="No legs to ground us.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://use.typekit.net/lma1fez.css">
	<link href="colorbox.css" rel="stylesheet" type="text/css">
	<style>
  @import url("https://use.typekit.net/lma1fez.css");
</style>
	</head>
	<div id="main-content-desktop"></div>
	<div class="top" role="main">
			<span>
				<h2>
				&nbsp;
				<a href="Context.html" title="Link to poetry"> TEXT </a>
				&nbsp;
				<a href="Video.html" title="Link to video"> VIDEO </a>
				&nbsp;
				<a href="Grid.html" title="Link to Image grid"> GRID </a>
				&nbsp;
				<a href="No legs to ground us.html" title="Link to same page"> PROJECT </a>
				&nbsp;
				<a href="index.htm" title="Link to main website"> ROELANDLENOIR.com </a>
				&nbsp;
				</h2>
	  </span>
		</div>

<body>
<div id="content">
    <div id="up-left">
        <div id="box">
			 <img src="http://roelandlenoir.com/NLTGU/Baukekopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Benen.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Bloemkopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Brug.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Dawit.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Kijker.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Schaken.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Spoorweg.jpg">
        </div>
    </div>
    <div id="down-right">
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Kwal.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Lamp%20Trein.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Maxkopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Metro%20mankopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Metrokopie.jpg">
        </div>
        <div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Plantenkopie.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Suzankopie.jpg">
        </div>
		<div id="box">
             <img src="http://roelandlenoir.com/NLTGU/Teije2kopie.jpg">
        </div>
    </div>
</div>
		
<script>
	
    var num_children = $('#up-left').children().length;
	console.log(num_children);
	// Aantal childs: 6
    var child_height = $('#up-left').height() / num_children;
	console.log(child_height);
	// Hoogte van de boxen: 400px
    var half_way = num_children * child_height / 2;
	console.log(half_way);
	// De helft van het scherm: 1200px
    $(window).scrollTop(half_way);
	// Scrollen naar de helft van het scherm
    var ul = '#up-left'; 
    var dr = '#down-right'; 
    function crisscross() {
        $(ul).css('bottom', '-' + window.scrollY + 'px');
        $(dr).css('bottom', '-' + window.scrollY + 'px');
        var ulc = $(ul).children();
        var drc = $(dr).children();
        var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
		// Naar beneden scrollen
        if (window.scrollY > half_way + child_height) {
			$(window).scrollTop(half_way + child_height);
			//Wacht 10ms totdat het scrollen klaar is
			setTimeout(function (){
				corners[2].appendTo(ul);    
				corners[0].prependTo(dr);
            }, 5);
        } else if (window.scrollY < half_way - child_height) {
            $(window).scrollTop(half_way - child_height);
			//Wacht 10ms totdat het scrollen klaar is
			setTimeout(function (){
				corners[1].appendTo(dr);
				corners[3].prependTo(ul);
			}, 5);
        }
    }
    $(window).scroll(crisscross);
</script>
</body>
</html>
...