Как обрабатывать различные разрешения экрана/размер экрана при разработке сайта?

Question

Я хотел бы создать сайт с помощью jQuery, который будет работать со всеми основными браузерами. Я решил начать с базового макета (заголовок, пару вкладок с контентом и нижний колонтитул). Интересно, как мне создать этот макет для поддержки различных разрешений экрана, размера экрана или размера окна. Должен ли я работать в пикселях/точках/процентах при определении ширины и высоты компонентов? Есть ли какие-либо jQuery-плагины, которые могут помочь мне с этой задачей? Благодаря !

Answer 1

Существует множество решений этой проблемы, но они в основном зависят от того, какой контент вы хотите разделить через сайт (например, встроенные видео или изображения, которые могут иметь конечный размер) и внешний вид вы идете.

Для веб-макетов, которые хорошо работают в разных браузерах и в широком диапазоне размеров окон, вы должны смотреть на «Жидкостные макеты». Ниже приведены несколько ссылок на руководства по этим макетам.

• Liquid layouts the easy way | Max Design
• Liquid CSS Layouts - Design Alternative to Table Based Websites
• Fixed Width Layouts Versus Liquid Layouts

Вы также можете использовать Javascript (в том числе JQuery), чтобы настроить стайлинг/содержание на основе разрешения окна (например, переход от многопрофильным расположение столбцов до одноколоночного макета для небольших экранов, таких как мобильные телефоны). Это называется «Adaptive Content».

• Adaptive CSS-Layouts: New Era In Fluid Layouts?

Answer 2

Это несколько простых сценариев я использовал в прошлом (с помощью JQuery):

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "css/blue-800.css"; 
if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; } 
if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; } 
if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; } 
$("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />'); 
} 

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

Кроме того, внутри каждого из этих файлов CSS это всего лишь минимальное количество CSS, которое устанавливает ширину основных контейнеров/оберток и даже фоновое изображение.

---

Обновление № 2: Если вы пытаетесь сохранить действительный HTML-код. Затем вы можете добавить все CSS стилей в заголовок вашей страницы (в том числе атрибут заголовка в каждом из них):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" /> 

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

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "blue1"; 
if (pageWidth > 510) { sizeSelected = "blue2"; } 
if (pageWidth > 580) { sizeSelected = "blue3"; } 
if (pageWidth > 900) { sizeSelected = "blue4"; } 
if (pageWidth > 1010) { sizeSelected = "blue5"; } 
if (pageWidth > 1420) { sizeSelected = "blue6"; } 
var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled'); 
$('head').find('link[title]').not(lnk).attr('disabled', 'disabled'); 
} 

Answer 3

jQuery сам не может помочь вам в этом. Вы должны получить общий HTML и CSS. Используйте Javascript и jQuery, если вам это нужно, не используйте его только для его использования. Вы должны работать с пикселями или процентами, когда дело доходит до размеров в Интернете. Очки предназначены для печати. Размер шрифта должен быть установлен в EM или пикселях.

Фиксированный макет является наиболее распространенным для обычных веб-страниц, и с использованием рамок сетки, таких как 960gs, у вас есть простой способ сделать пропорции gthe достойными, сохраняя при этом подавляющее большинство разрешений экрана. Кроме того, гораздо проще адаптировать графику к макете с фиксированной шириной и в то же время сделать страницу простой в использовании.

Имейте в виду, когда/если вы используете проценты, то текстовые строки длиннее 600-800 пикселей трудно или медленно читать. Aka с областью содержимого 80% может быть хорошей идеей для видового экрана шириной 1000 пикселей, но если у вас есть окно просмотра 1900 пикселей, сайт становится в основном непригодным для использования.

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

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

Answer 4

Основываясь на ваших описанных потребностях, я настоятельно рекомендую проверить файл css «Grids» из библиотеки пользовательского интерфейса Yahoo (YUI), вы можете найти файл плюс документацию здесь: http://developer.yahoo.com/yui/grids/.

Базовая установка пакета сетки включает в себя заголовок, корпус и нижний колонтитул. Вы можете удалить заголовок и/или нижний колонтитул, если хотите. Тело можно разделить с использованием модели вложенной сетки и включить множество шаблонов.

Лично я начинаю с всех страниц HTML/CSS, которые я создаю с помощью объединенного файла «reset-fonts-grids» из YUI. Он предоставляет вам кросс-браузерский файл сброса css, файл гридов и некоторые стандартизованные классы для шрифтов.