Как заставить элементы растягиваться на разные разрешения экрана, html и css

Я создаю систему управления обучением для школы, и я создал этот веб-сайт на HTML и CSS на своем 12-дюймовом MacBook.

Я просматривал свой веб-сайт с другим разрешением экрана, и он не соответствует размеру экрана.

Ниже приведен код HTML и CSS. Спасибо всем за участие.

Код:

HTML:

    <!DOCTYPE html>

<!--
~ Copyright (c) myEd (made by students, for students.) 2018.
-->

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>My Design Class | myEd</title>

<link rel="stylesheet" type="text/css" href="/Portals/MDC/Stylesheets/style.css">

<!-- Insert favicon directly below this message -->

<link rel="shortcut icon" type="image/png" href="http://i63.tinypic.com/52jdd2.png">

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.5, minimum-scale-1.0">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<!-- Insert required scripts directly below this message -->

<script src="/Portals/Calendar/Scripts/script-allPortals.js"></script>

</head>

<body>

<div class="screen">

<!-- sideNav basic formatting, with page href's # inside with image-representations -->

<div class="sideNav">

<!-- myEd image-representation icon, in blue -->

<center>
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/myEd-navBar.svg" alt="myEd" height="12px" title="myEd">   
</center>

<!-- Space between myEd and the menu items x6 <br> -->

<br>
<br>
<br>
<br>
<br>
<br>

<!-- Home -->

<a href="#" title="Home Workspace">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/home.svg" alt="home" height="25px">
</a>

<!-- Cirriculum -->

<a href="#" title="Student Workspace">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/cirriculum.svg" alt="cirriculum" height="25px">    
</a>

<!-- Student -->

<a href="#" title="Student Management Workspace">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/student.svg" alt="student" height="25px">    
</a>

<!-- Portals -->

<a class="active" title="Portal Workspace" href="#">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/portals.svg" alt="portal" height="25px">    
</a>

<!-- Space between menu items and the bottom sideNav options including help and logout, x6 <br> -->

<br>
<br>
<br>
<br>
<br>
<br>

<!-- Insert help and log-out image representations directly below this message, these will also be menu items -->

<!-- Help -->

<a href="#" title="Help">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/help.svg" alt="help" height="30px">    
</a>

<!-- Log-out -->

<a href="#" title="Log-out">
<img src="/Portals/Calendar/Pictures/SVG/Consistent-SVG/log-out.svg" alt="log-out" height="25px">    
</a>

</div>

<!-- Main content of the HTML page -->

<div class="main">

<!-- box-header = orange 30x30 -->

<img src="/Portals/Calendar/Pictures/SVG/orange-header.svg" alt="orange-header" width="30px" height="30px" title="My Design Class" align="left"/> 

<!-- Font of h4 -->

<font face="Trebuchet MS" color="#000"><h4>My Design Class</h4></font>

<!-- Box Header with emphazise, External Content -->

<div class="box-header">
<font face="Trebuchet MS" color="#71747e"><h4><em>Embedded Source</em></h4></font>    
</div>

<!-- Embedded content = My Design Class -->

<iframe src="http://www.mydesignclass.net/" width="922" height="598"></iframe>

<!-- Navigation Bar -->

<div class="navbar">

<!-- KAS Calendar -->

<a href="/Portals/Calendar/HTML/index.html" title="KAS Calendar">
<img src="/Portals/Calendar/Pictures/SVG/blue-navBar.svg" alt="blue-navBar" height="20px">  </a>

<!-- KAS Website -->

<a href="/Portals/Website/HTML/index.html" title="KAS Website">
<img src="/Portals/Calendar/Pictures/SVG/green-navBar.svg" alt="green-navBar" height="20px">   </a>

<!-- Gmail -->

<a href="/Portals/Gmail/HTML/index.html" title="Gmail">
<img src="/Portals/Calendar/Pictures/SVG/orange-navBar.svg" alt="orange-navBar" height="20px"> </a>

<!-- Drive -->

<a href="/Portals/Drive/HTML/index.html" title="Drive">
<img src="/Portals/Calendar/Pictures/SVG/purple-navBar.svg" alt="purple-navBar" height="20px"> </a>

<!-- Primary Blog -->

<a href="/Portals/PrimBlog/HTML/index.html" title="Primary Blog">
<img src="/Portals/Calendar/Pictures/SVG/blue-navBar.svg" alt="blue-navBar" height="20px">
</a>

<!-- Secondary Blog -->

<a href="/Portals/SecBlog/HTML/index.html" title="Secondary Blog">
<img src="/Portals/Calendar/Pictures/SVG/green-navBar.svg" alt="green-navBar" height="20px">   </a>

<!-- My Design Class -->

<a href="#" class="active" title="My Design Class">
<img src="/Portals/Calendar/Pictures/SVG/orange-navBar.svg" alt="orange-navBar" height="20px"> </a>

<!-- NESA -->

<a href="/Portals/NESA/HTML/index.html" title="NESA Student's Online">
<img src="/Portals/Calendar/Pictures/SVG/purple-navBar.svg" alt="purple-navBar" height="20px"> </a>

<!-- Flexi Schools -->

<a href="/Portals/FlexiSchools/HTML/index.html" title="Flexi Schools">
<img src="/Portals/Calendar/Pictures/SVG/blue-navBar.svg" alt="blue-navBar" height="20px">
</a>

<!-- School Interviews -->

<a href="/Portals/School-Interviews/HTML/index.html" title="School Interviews">
<img src="/Portals/Calendar/Pictures/SVG/green-navBar.svg" alt="green-navBar" height="20px"> </a>

<!-- SEQTA Learn -->

<a href="/Portals/SEQTA/HTML/index.html" title="SEQTA Learn">
<img src="/Portals/Calendar/Pictures/SVG/orange-navBar.svg" alt="orange-navBar" height="20px"> </a>

</div>

<!-- Divider between main and panel -->

<div class="divider"></div>

<!-- Side Panel featuring basic info and myEd news incl. updates and important notifications for students -->

<div class="panel">

<!-- CARTH -->

<img src="/Portals/Calendar/Pictures/External/CARTH-2017.jpg" class="CARTH-2017" alt="CARTH-2017" title="Tom Carpenter" align="left">

<!-- Tom Carpenter .h2 -->

<font face="Trebuchet MS" color="#ffffff"><h2>Tom Carpenter</h2></font>

<!-- Content .p -->

<font face="Trebuchet MS" color="#bfc2c9"><p>Year 11 11B <span title="Tom is in the school house, Jackson" style="color: #f0f000">JACKSON</span></p></font>

<font face="Trebuchet MS" color="#bfc2c9"><p><span title="Student ID: 714020">// 714020 // CARTH</span></p></font>

<!-- School-based email, href, .p -->

<font face="Trebuchet MS"><p><a href="mailto:tom.carpenter@kas.nsw.edu.au" target="_blank" style="color: #bfc2c9" title="tom.carpenter@kas.nsw.edu.au">Email</a></p></font>

<iframe id="myEd-News" src="/Portals/myEd-News/HTML/index.html"></iframe>

<!-- Bottom navBar -->

<div class="siP-navBar">

<font face="Trebuchet MS" color="white"><center><h4 title="Currently logged in as the username (carpentt) and by the name Tom Carpenter (CARTH)">CARTH</h4></center></font>

</div>

</div>

</div> 

</body>

</html>

CSS:

body {
    height: auto;
    width: 100%;
    min-width: 1000px;
}

.screen {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 100px;
}

/* sideNav, 35px x 100% */

.sideNav {
    width: 35px;
    height: 100%;
    background-color: #020245;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 10px;
    float: left;
}

.sideNav a {
    display: block;
    text-align: center;
    margin-left: -16px;
    transition: all 0.3s ease;
    padding: 20px;
}

/* sideNav hover = light-grey */

.sideNav a:hover {
    background-color: #bfc2c9;
}

/* Selected menu-item colour = white */

.active {
    background-color: #ffffff;
}

/* Margin to how close .main items are to the sideNav, leave at 30px */

.main {
    margin-left: 30px;
    float: left;
}

/* Padding and margin from image-representation and title */

h4 {
    margin-top: 1px;
    margin-bottom: 14px;
    margin-left: 3px;
}

/* External Content = light-grey rectangular box */

.box-header {
    width: 925px;
    height: 30px;
    background-color: #bfc2c9;
}

/* Place the navbar at the bottom of the page */

.navbar {
    background-color: #71747e;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 925px;
}

/* Style the links inside the navigation bar */

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2; /* Not necessary, but leave for possible future requirements */
    text-align: center;
    padding: 3px 18px;
    text-decoration: none;
    font-size: 12px; /* Not necessary, but leave for possible future requirements */
}

/* Hover */

.navbar a:hover {
    background-color: #bfc2c9;
    color: black;
}

/* Active */

.navbar a.active {
    background-color: #ffffff;
    color: white;
}

/* Divider */

.divider {
    width: 5px;
    height: 100%;
    background-color: #020245;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 10px; 
    float: left;
    margin-left: 965px;
}

/* Side Panel featuring basic info and myEd news incl. updates and important notifications for students */

.panel {
    width: 306px;
    height: 100px;
    background-color: #585858;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 10px;
    float: left;
    margin-left: 972px;
    padding-bottom: 0px; 
}

.CARTH-2017 {
    margin-left: 5px;
    width: 70px;
    height: 90px;
}

h2 {
    margin-top: -5px;
    margin-bottom: 3px;
    margin-left: 30px;
    padding-left: 50px;
}

p {
    margin-top: 0px;
    margin-bottom: 3px;
    margin-left: 30px;
    padding-left: 50px;
}

#myEd-News {
    overflow: hidden;
    position: fixed;
    width: 302px;
    height: 560px;
    margin-top: 7px;
}

.siP-navBar {
    background-color: #71747e;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 306px;
    height: 29px;
}

Спасибо.

Трудно читать ваш код, левая часть имеет фиксированную ширину?

Chris Li 10.09.2018 11:31

Да. Левая часть имеет фиксированную ширину, все элементы имеют фиксированную ширину.

tcarpenter17 10.09.2018 11:33

хорошо, если ширина фиксирована, конечно, она будет одинакового размера для всех разрешений

Chris Li 10.09.2018 11:33

Ну, я имел в виду, что поля, панели навигации и т. д. Исправлены, есть ли способ отменить это, чтобы элементы растягивались во всех разрешениях экрана?

tcarpenter17 10.09.2018 11:37

попробуйте дать им% ширины

Chris Li 10.09.2018 11:38

Я дал подробное объяснение. Пожалуйста, пройдите и получите четкое представление.

Naresh Kumar P 10.09.2018 11:45
4
6
733
5

Ответы 5

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

/ * Очень маленькие устройства (телефоны, 600 пикселей и ниже) * /

@media only screen and (max-width: 600px) {...}

/ * Маленькие устройства (планшеты с портретной ориентацией и большие телефоны, 600 пикселей и выше) * /

@media only screen and (min-width: 600px) {...}

/ * Средние устройства (планшеты с горизонтальной ориентацией, 768 пикселей и выше) * /

@media only screen and (min-width: 768px) {...}

/ * Большие устройства (ноутбуки / настольные компьютеры, 992 пикселей и выше) * /

@media only screen and (min-width: 992px) {...}

/ * Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200 пикселей и выше) * /

@media only screen and (min-width: 1200px) {...}

Можете ли вы помочь мне, приведя пример в моем коде, это было бы большим подспорьем. Спасибо.

tcarpenter17 10.09.2018 11:34

Что входит в {...}?

tcarpenter17 10.09.2018 11:36

добавьте свой класс css между {...} как @media only screen и (max-width: 600px) {.box-header {width: 600px; высота: 30 пикселей; цвет фона: # bfc2c9; }}

webcodesnip.com 10.09.2018 11:38

Я поместил весь свой CSS-код в код @media only, он все равно не работал. Вы должны удалить предыдущий CSS, который вы копируете, при размещении CSS в медиа-запросах?

tcarpenter17 10.09.2018 12:09

Во-первых, ваш код не реагирует, например, класс

.panel {
    position: fixed;
    float: left;
    margin-left: 972px;
}

используется фиксированная позиция и плавающее положение, с левым полем в пикселях, вы не используете значения percentage для соответствия ширине экрана, поэтому он выглядит так, как на больших экранах, используйте CSS-фреймворки, такие как bootstrap, foundation ,. .. и т.д. для быстрого развития, и вы будете учиться на нем.

Вы установили для всего содержимого фиксированную ширину, поэтому его нельзя будет масштабировать на экранах большего размера. Подумайте о том, чтобы изменить свой код CSS, включив в него медиа-запросы, чтобы содержимое изменилось в определенных точках останова. (Если вы хотите сделать это правильно, начните с разработки сначала для мобильного устройства, а затем на больших экранах.)

@media only screen and (min-width:768px) { /* Your CSS */ } 
  • 768px - планшетные устройства
  • 992px - Маленький рабочий стол
  • Большой рабочий стол 1200 пикселей

Note: All the below MEDIA QUERY you have to add it in your style.css. Media Query is a CSS alone it is not a separate file. So this is mainly used for Responsive Web Design. What all the elements to be resized based on the screen size you have to provide between the media query braces. E.g: @media all and (max-width: 359px) and (min-width: 300px){ // Add your CSS Styles here. }

Медиа-запрос - это метод CSS, представленный в CSS3. Он использует правило @media для включения блока свойств CSS, только если выполняется определенное условие.

Ссылка: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Медиа-запросы будет лучшим и эффективным методом изменения размера содержимого в соответствии с макетами экрана. Вот некоторые из наиболее стандартных используемых медиа-запросов.

@media all and (max-width: 359px) and (min-width: 300px){
 //320 PX - **PORTRAIT**
}

@media all and (max-width: 479px) and (min-width: 360px){ 
  //360 PX - **PORTRAIT**
}

@media all and (max-width: 600px) and (min-width: 480px){
 //320 PX (Rotation) - **LANDSCAPE**
}

@media all and (max-width: 749px) and (min-width: 601px){
 //360 PX (Rotation) - **LANDSCAPE**
}

@media all and (max-width: 978px) and (min-width: 750px){
//768 PX - **PORTRAIT**
}

@media all and (max-width: 1024px) and (min-width: 979px){
//768 px (Rotation)- **LANDSCAPE**
}

Помимо медиа-запроса, HTML5 представил метод, позволяющий веб-дизайнерам контролировать область просмотра с помощью тега.

Вы должны включить следующий элемент области просмотра на все свои веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note: without the above code the screens will mot vary depending on the resolutions

Ссылка: https://www.w3schools.com/css/css_rwd_viewport.asp

Я поместил весь свой CSS-код в код @media all, но он все равно не работал. Вы должны удалить предыдущий CSS, который вы копируете, при размещении CSS в медиа-запросах?

tcarpenter17 10.09.2018 11:59

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

Naresh Kumar P 10.09.2018 12:28

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

Если это так, следующее будет динамически изменять размер левой части экрана по размеру, сохраняя при этом правую часть фиксированной на правой стороне экрана. Обратите внимание на использование% (часть содержащего элемента), vw и vh (часть области просмотра) и calc () (вычисления на основе динамической и фиксированной ширины) для достижения этой цели.

Попробуйте следующие правки (правки прокомментированы):

.panel {
    width: 306px;
    height: 100px;
    background-color: red;
    position: fixed;
    top: 0;
    right: 0; /*changed from left: 0;*/
    overflow-x: hidden;
    padding-top: 10px;
    float: left;
    /* removed margin-left: 972px;*/
    padding-bottom: 0px;
}

.divider {
    width: 5px;
    height: 100%;
    background-color: #020245;
    position: fixed;
    top: 0;
    right: 0; /*changed from left: 0;*/
    overflow-x: hidden;
    padding-top: 10px; 
    float: left;
    margin-right: 306px; /*changed from margin-left: 965px;*/
}

.navbar {
    background-color: #71747e;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: calc(100vw - 306px);/* changed from width: 925px;*/
}

.box-header {
    width: calc(100vw - 306px);/*changed from width: 925px;*/
    height: 30px;
    background-color: #bfc2c9;
}

.main {
    margin-left: 30px;
    float: left;
    width:calc(100vw - 350px);/*added*/
}

.sideNav {
    width: 35px;
    height: 100%;
    background-color: #020245;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;/*changed from overflow-x: hidden;*/
    padding-top: 10px;
    float: left;
}

/* add new class*/
.frame{
    position:relative;
    left:0;
    width:100%;
    height:calc(100vh - 139px);
}

А затем добавьте в свой HTML-код класс 'frame' в свой iframe:

<iframe class="frame" src="http://www.mydesignclass.net/" width="922" height="598"></iframe>

Другие вопросы по теме