Как разместить свой сайт для всех или для большинства разрешений экрана?

Вопрос:

Одной из основных проблем, которые я испытываю при разработке веб-сайтов, является разнообразие разрешений экрана. Во-первых, я проектирую свой компьютер 1366 x 768, и он отлично выглядит! Затем на 27-дюймовом Mac он имеет столько места, что высота могла бы использовать в контенте. Как и при разрешении экрана, вам нужно беспокоиться о ширине, а по мере ее увеличения — о высоте. это то, что является основополагающим фактором для решения разрешений экрана и пространства? Я слышал, что проценты, отдельные листы стилей мультимедиа и отзывчивость будут делать сделку, но действительно ли они решат проблему?

Я думаю, что изменения должны быть сделаны в следующих местах, хотя я не уверен:

section > div{
font-weight:bold;
font-size:30px;
color:#000000;
display:inline; /*fixed size based only what is in the element*/
width:30%; /*restrict the width size, default with inline property is 100%*/
/*max-height:85%;*/ /*restrict height size*/
padding:5px; /*a little pad from the edges are good*/
margin-top:10px; /*align the same as the other elements*/
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
position: absolute;
top:120px;
left:-75px;
right:100px;
min-height:310px; /*same height across all content pages*/
min-width:550px; /*same width across all content pages*/
font-size:20px;
}

На всякий случай, мой полный код css в jsfiddle: JS Fiddle

Я хочу охватить большинство целевых аудиторий моим сайтом и сейчас, он подходит только для 1024 x 768 и некоторых планшетов, но определенно не для мобильных устройств или больших экранов компьютеров.

Мой сайт: проект веб- сайта по фотографии SmartPhone

Вы видите, как содержимое выравнивается с фоновым изображением. Камера находится справа и содержимое слева, не касаясь или закрывая камеру на фоне фона, как на мобильных устройствах. Другое дело, на больших экранах компьютеров, там слишком много места сверху и снизу содержимого, это похоже на то, что оно посередине с фиксированной высотой. По мере увеличения высоты экрана я хочу, чтобы у содержимого была меньшая кнопка вертикальной прокрутки и заполнялось пространство, необходимое для просмотра на 1024 x 768.

Я бы очень признателен за ответ на эту проблему и что-то, что можно использовать для дальнейших ссылок о том, как разрешать разрешения экрана во всех средах. Этот сайт является фантастическим для тестирования нескольких разрешений экрана. ViewLike.US

Лучший ответ:

Похоже, вы должны реагировать. Затем вы можете настроить для своего окна просмотра. Используйте медиа-запрос или используйте такой параметр, как Bootstrap. Вот пример медиа-запроса:

/***************
TABLET */

@media (min-width: 768px) {
    body{
        /*Put all your secific styles here*/
    }
}

/***************
DESKTOP NORMAL*/
@media (min-width: 992px) {
body{
    /*Put all your secific styles here*/
}

К сожалению, это не так просто, как писать одну строку и исправлять все самостоятельно.

ПРИМЕЧАНИЕ. Если вы ответите, используйте em для шрифтов, % для ширины. Не означает, что вы не должны использовать пиксели, помните, что запрос специфичен, поэтому для 992px Desktop вы можете установить width:20px; или что-то еще.

Надеюсь это поможет.

Оцените статью
TechArks.Ru
Добавить комментарий