Как настроить размер страницы html

Как адаптировать сайт под разные разрешения

Рассказываем и показываем, как создавать удобные сайты, которые будут хорошо выглядеть на разных мониторах.

Многие разработчики слишком ленивы, чтобы хоть как-то адаптировать свой сайт: одни проверяют всё только под свой браузер, а другие игнорируют мобильные устройства.

Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:

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

Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:

Встроенных настроек для этого нет, в отличие, например, от Telegram:

Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.

За основу возьмём сайт из статьи про добавление тёмной темы . Читать её не обязательно, но там подробнее объясняется часть с PHP-скриптами. Также вы можете посмотреть исходный код этого сайта на GitHub.

Создаём адаптивные стили

Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.

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

Сам контент, не считая хэдера и футера, не стоит растягивать на всю страницу:

Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:

Также вы можете указать максимальную ширину в пикселях:

Тогда при любом размере монитора читать будет более-менее комфортно.

Создаём стили под отдельные разрешения

Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:

Кроме него будут созданы ещё два файла: small.css и big.css. Они добавляются с помощью отдельного элемента link:

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

И остаётся только подключить скрипт, который будет переключать файл стилей:

Кроме переключения стиля, скрипт ещё и сохраняет выбор пользователя в его браузере, чтобы при повторной загрузке страницы подключался именно этот файл. Для этого используется следующий PHP-код:

Можно посмотреть, как это будет выглядеть:

Обратите внимание, что блок с текстом для небольших экранов стал шире — это не тот случай, когда пустота красит страницу .

Автоматическое масштабирование

С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода:

В результате страница будет масштабироваться автоматически.

Источник

Как изменить масштаб html страницы?

Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы уменьшится с сохранением ширины документа. Это важный момент, т. к. решения, которые я находил в интернете уменьшали масштаб и в том числе сужали страницу по ширине.

Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).

3 ответа 3

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

Так как «уникальные» для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.

Масштабирование может быть реализовано самим сайтом с помощью возможностей CSS.

Правильный способ

Использовать относительные размеры для шрифтов ( % , em и др.), в корне страницы менять размер базового шрифта.

Для остальных элементов можно добавить дополнительные стили и опять же в зависимости от класса корня менять размер. Для картинок будет разумно округлять масштаб до «круглых» чисел вроде 50%, 33% и т. п.

Жёсткий способ

Использовать стандартное свойство CSS transform . Можно добавить в корень документа стиль transform: scale(N%) , тогда отмасштабируется вся страница. Учтите, что за качество и производительность никто не отвечает.

Чтобы сохранить ширину страницы, её можно менять в соответствии с масштабом (помножить на обратное число, собственно).

Костыльный способ

Ипользовать нестандартное свойство CSS zoom . Опять же в корень можно добавить zoom: N% . Поддержка не гарантируется, работает не во всех браузерах.

Источник

Как изменить ширину сайта?

Это помимо того, что вопрос косой.

В бутстрапе есть 2 класса .container-fluid для 100% ширины и .container для фиксированной. Вероятно, вам нужно поменять container-fluid н container.
А может и нет. Мы же не знаем, что у вас в коде, может там все стили бутстрапа перебиты.

Чего не стоит делать, так это менять ширину тега body.

Раз человек задаёт подобный вопрос, значит ему бесполезно говорить «задайте max-width», он скорее всего просто не знает что это такое и где его задают.
Поэтому давайте так:
1. Откройте страницу вашего сайта.
2. Правой клавишей мыши откройте контекстное меню и выберите «Просмотр кода страницы» (это в Chrome в других браузерах может быть чуть по другому, но главное, чтоб были слова код и страница).
3. В отдельной вкладке откроется код вашей страницы, найдите в нём конструкцию (тег) /head. Делается это так: нажимаете комбинацию клавиш Ctrl+F и в правом верхнем углу появляется окно поиска. Вводите в него нужную конструкцию, в нашем случае /head, и этот тег сразу подсвечивается на странице с кодом.
4. Находите конструкцию (тег), который идёт сразу после тега /head. Это может быть wrapper, body, или что-то другое. В современных темах встречаются разные названия, видимо в целях безопасности или ещё чего. зависит от бзика разработчика, главное чтоб после тега /head
5. Идёте в админку вашего сайта и выбираете в меню слева «Внешний вид», а в нём «Редактор тем». Переходите.
6. Вам сразу откроется файл style.css. Именно он вам нужен.
7. Открываете Поиск (Ctrl+F) и вбиваете тот элемент, который вы нашли на странице с кодом после /head
8. Нюанс: в редакторе WordPress подсветятся только те элементы, которые находятся в видимой части экрана и если в вашей теме в начале файла style.css много комментариев, то поиск нужного элемента не увидит. Придётся найти его чисто визуально, что не будет особо сложно, так как такие элементы находятся обычно вверху файла. На сервере это было-бы делать проще, но учитывая вашу подготовку, я вас туда не посылаю.
9. Нужный вам элемент скорее всего будет в нескольких селекторах, в том числе и в групповых, где нескольким элементам заданы одни и те-же свойства, поэтому я рекомендую прописать в файле отдельный селектор, в любом месте после закрывающей скобки> такого вида

body (или другое название) <
max-width: 80%; (число на ваше усмотрение, можно задать в пикселях)
>

Сохраняем файл, смотрим что получилось и подгоняем нужную ширину.

Источник

Есть ли в HTML тег «size»?

Чтобы сайт выглядел согласно вашему дизайну, придется менять размер текста или размер изображений HTML . Чтобы сделать это, вы, вероятно, будете искать тег « size », но вскоре поймете, что в гипертексте такого нет.

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

Единственный способ изменять размеры шрифта — это устаревший тег , который имеет атрибут size . Имейте в виду, что этот тег отсутствует в текущих версиях HTML , и в будущем может перестать поддерживаться браузерами! Изменять размеры элементов и стили сайта следует с помощью CSS .

Размеры шрифтов

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

Чтобы получить абзац со шрифтом 12pt , нужно задать ему свойство font-size :

Это изменит размер заголовков третьего уровня до 24 пикселей. Можно добавить это свойство к внешней таблице стилей, и это значение будут использовать все заголовки .

Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила :

Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным ( о чем говорит hex-код #000 ), а также установит начертание в значение « normal ». По умолчанию, браузеры отображают заголовки h1—h6 в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.

Размеры изображений

Не всегда удается задать нужный размер изображений, так как браузер может делать это автоматически. Браузеры не всегда хорошо справляются с этой задачей, отчего сильно страдает качество отображения картинок. Поэтому перед тем, как задать размер изображения в HTML , лучше использовать графические редакторы. А затем прописывать их фактический размер в разметке веб-страницы.

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

Чтобы задать изображению размер в HTML , используйте тег с атрибутами height и width .

Например, изображение должно иметь размер 400 на 400 пикселей:

Чтобы задать размеры изображения в CSS , используйте свойства height и width . Вот то же изображение, для определения размера которого используется CSS :

Размеры основных блоков на странице

Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения — пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML изображениями по размеру окна, нужно применять CSS-свойства height и width .

Фиксированная ширина:
style=»width:600px;»>

Адаптивная ширина:
style=»width:80%;»>

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

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

Источник

Сделать ширину сайта в зависимости от разрешения монитора. @ Media

В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент «нормальным» стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать «резиновые» сайты, которые создаются путём использования

1. @Media,
2. относительных величин.

Благодаря им теперь не нужно искать оптимальную ширину сайта.

@Media CSS

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .

Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись «Дата обновления» и т.д.

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)’.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Размещение экрана как «пейзаж» (ширина больше высоты) и «портрет» (ширина меньше высоты)

104 комментария:

calmos спасибо NMitra Пожалуйста.
Это действительно полезная статья! Анонимный Не могу не согласится — статья действительно полезная.

Только вот как-то привык что ли к стандартной ширине блога, или просто лень заниматься (а чесно говоря надо. 🙂 )

Спасибо за информацию, Наталия, как только руки дойдут, так сразу и возьмемся!!

Вам — букетик ромашек и еще одно спасибо!! NMitra Я тоже так сначала думала, но с увеличением занимаемой площади ресурс выглядит более выигрышно. Плюс с увеличением разрешения экрана можно разместить дополнительные рекламные блоки. Анонимный Уговорил себя и сел пробовать менять ширину блога. Не получилось. Одна из причин — не нашел подходящего для вписывания максимальной ширины 100 % кода, потом что-то похожее нашел, но основная проблема осталась — старый шаблон: увеличивается то одно, то другое, но все нормально свои места занимать не желает, вот и в этот раз новации обходят меня стороной 🙂 и не связываются.. NMitra Со старым шаблоном ещё проще. В разделе @media указаны основные его элементы. Трудность может возникнуть при использовании цельно изображения в качестве фона, такого как в «Словечко». Nattaxa Спасибо, работает. Nattaxa Только разрешения, а не расширения. (в заголовке) NMitra Вот спасибо.)))

Бывает опечатываюсь. Двойка мне! Анонимный Я не понял: в чём преимущество? Рамки сообщений и гаджетов остались те же. то есть никаких дополнительных мест для использования и вставки блоков не появилось.
Единственное, что произошло — исчез фон. Вот и всё. В чём прикол-то? NMitra Какого разрешения у вас монитор? Анонимный 1600*900 широкоформатник NMitra А браузер? IE не поддерживает. Анонимный Ну у меня Мозилла стоит) NMitra И не видно при уменьшении экрана как кот меняется местом с текстом? — http://prilozhenie8.blogspot.com/. А при самом маленьком размере исчезает? Анонимный Да, это так. Но как это связано с тем, что у меня пропадает фон при настройках, описанных в статье? NMitra В данном примере я задавала фон только для разрешения до 800px (background-color: #ece2ca;). Этим я хотела показать, что можно определять любые стили CSS для сайта для разных разрешений экрана, в том числе показывать или нет боковые колонки. Анонимный В общем, я разобрался, спасибо. Но скажите: каким образом можно добавлять дополнительные блоки и т. п.? Шаблон-то (элементы страниц) всё равно фиксированный. NMitra Делаете ширину сайта побольше. Включаете две или более боковых панели, которые при маленьком разрешении убираете в < display:none; >. При увеличении экрана данное свойство не указываете. Анонимный В общем, спасибо, но я решил отказаться от этой идеи. Потому что на разных мониторах это смотрится по-разному. Например, у меня широкоформатник, а вот у пользователей с квадратными мониторами края по-другому смотрятся. И некоторые элементы съезжают. NMitra Аналогично для высоты: @media (min-height: . px) < . >.

Из минусов я вижу трудоёмкость метода.

Лично я на этом блоге совмещаю оба (резиновый и @ Media). В целом шаблону заданы максимальная и минимальная ширина. Но для страниц типа http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html нужно задавать фиксированную ширину, чтобы убрать боковую колонку. Поэтому для них я применяю @ Media. PANIC здравствуйте! вопрос не совсем по теме, но можно-каким-нибудь образом сделать разный фон на разных страницах? интересует, чтобы конкретные стат.страницы имели фон, отличный от основного. и как тогда они будут зависеть от свойств основного фона (например, выравнивание фонового рисунка). NMitra Привет. Вопрос интересный. Тему освещу в следующей статье. NMitra Страница http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html. Я пока не буду показывать её в фиде. altersego Сайт и ваш основательный подход восхищают. Однако, нарастает раздражение, поскольку вы «между делом» и не «по теме» даете очень полезные вещи. Начинаю тупо просматривать все подряд (а работа стоит).
Например, здесь вы пишите об «Изначальных размерах блоков». а для какого шаблона?
1.Предлагаю написать статью с «разбором» и объяснением конкретного нового шаблона (готов помогать, поскольку сижу и тыкаю файрбагом в «simple template», дабы сделать его резиновым)).
2. Открыть для всех читателей блога один аккаунт закладок, по этой статье я бы сделал такую закладку «Как сделать «резиновый» шаблон у блогов на платформе Blogger в статье о @ Media»
Думаю, что многие читатели добавит свои закладки на эту же статью, но отметят совершенно другие вопросы.
А вам останется лишь организовать RSS-трансляцию с этого аккаунта на поля этого блога. и будет для нас справочник howto. и блог слегка продвинем.
И о продвижении, . понятное дело, что вы здесь пишите «для себя», а не для рекламы. но именно такие блоги и надо двигать. Если вы напишите пост о пользе ссылок с сервисов закладок, с рекомендациями, то мы все будем открывать аккаунты и ссылаться на страницы этого блога. NMitra Это для шаблонов 2006 года. Поскольку более новые шаблоны уменьшают ширину после определённого значения некорректно (появляется горизонтальная полоса прокрутки). См. текст статьи. А мне хотелось показать узкий вариант. Более доходчиво вряд ли мне удастся написать. Если только вот пример.

@ Media я использую, если нет альтернативного варианта с max-width и min-width. Например, меню сверху на данном блоге слишком широкое и на экранах с маленьким разрешением показывается в два слоя, что некрасиво. В IE можно посмотреть. Поэтому для меньших экранов монитора я уменьшаю размер букв, что выглядит следующим образом:

Уменьшите размеры окна браузера Мозилы для демонстрации. Мне нравится, что можно регулировать такие мелочи.

Не думаю, что большая часть читателей будет применять @ Media. Только малая часть из них.

Покажите пример с аккаунтом в соц. закладках. Сейчас тренд сезона — социальные сервисы. Закладки ушли на задний план. Остались закладки от Яндекса и Гугл, но они не для широкой общественности. NMitra Какой адрес вашего блога? Detsle http://detsle.blogspot.com/ NMitra Вам это не подходит. Какой цели добиваетесь? Detsle Ну чтобы под разные нормально смотрелся) NMitra html body .region-inner <
padding-left: 25px;
padding-right: 25px;
max-width: 99%;
>

Значения на своё усмотрение. temasey что-то не понятно как делать. вставил но ниче не произошло NMitra Что вставили, в какой блог? temasey belo-mor.ru он все равно будет разъезжаться наверно да?
ну перед стайл ]]> а куда следующие коды вставлять непонятно немного NMitra Перед

body <
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
>

body <
padding-left: 20px;
padding-right: 20px;
>
html body .content-outer <
max-width: 100%;
> temasey я поставил это после стайла, но не оч радуюсь, так и должно быть? NMitra Не туда добавили. Уберите. В шаблоне найдите строку

После неё будет код, указанный в комментарии 35. Добавляйте часть, которая следует после слова «внесите». «Внесите» не должно быть в коде. temasey ой)
я просто код не проглядел)
эмм..та че то неоч то изменения проглядываются NMitra А теперь установите нужные значения padding (отступ) и max-width (максимальная ширина). ThreeT Народ, подскажите.

Есть шаблон размером 1734рх он отображается не весь на экране (и само сабой чем больше экран и разрешение, то видно больше сайта).
Верстальшик сказал, что нужно переделывать шаблон. Но есть ведь настройки CSS для того, что бы он принимал разную ширину на разных разрешениях.
Как это можно сделать? Или реально придется переделывать шаблон?! NMitra С @ Media можно многое решить, скажем, посмотрите, примеры на этой странице http://css-tricks.com/responsive-data-table-roundup/ Есть один минус — IE пока не поддерживает. Max Suharev Спасибо то что искал! NMitra На здоровье! Приходите ещё :)) Анонимный очень полезная статья! Большое спасибо temasey Здравствуйте)
опять взялся за эту ошибку, уже и посетители жаловаться стали 🙂
что то ошибку выдает на этапе http://cs405529.vk.me/v405529514/69b5/PFAc3bvn8DQ.jpg NMitra Здравствуйте, для какого там блога, какая группа шаблонов? Код нужно устанавливать сразу перед ]]> . temasey steve-o.ru
теперь вообще ничего не понял. NMitra Один из этих кодов http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#blogger
Вы добавляете сюда http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css Александр Кувшинников Здравствуйте, Наталья! Скажите, пожалуйста, а как быть мне — у меня блог состоит из одной главной колонки, плюс шапка с изображением и футер: ничего больше нет. Как мне грамотно сделать, чтобы дизайн адаптировался под разрешение экрана.
Прочитал очень много статей по этой теме, но вот с практикой какая-то беда на данный момент.
Посмотрите, пожалуйста: http://www.kuvschinnikov.ru/.
Заранее огромное спасибо! Александр Кувшинников Лучше вопрос поставить так: как сделать, чтобы на меньших разрешениях основные блоки пропорционально уменьшались?! Для планшетов, телефонов и т.д. Пытался делать вот по этой статье: http://naikom.ru/blog/archives/5566. Не могу определить основные блоки, с которыми нужно работать. Пытаюсь сделать так, как на этом сайте: http://www.stratisbakas.com/. Все равномерно уменьшается. Посмотрел исходники, суть понял, а вот себе применить не могу. Получается, что прописывать нужно для всех страниц? Очень надеюсь на вашу помощь! NMitra body <
min-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner <
min-width: 1000px;
max-width: 1000px;
_width: 1000px;
>

body <
max-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner <
max-width: 1000px;
>

Это должно сделать шаблон «резиновым». Далее нужно в шаблоне все текстовые элементы перевести в %. Например, заголовок h, тег p и т.п. Для фонового изображения прописать

background-size: 100% 100%;

Могу сказать, что будет не просто. Александр Кувшинников После того, как я изменил значения, «шаблон» прилип к левому краю, стали «обрубленные» полоса меню и футера. Хотелось бы сохранить первоначальное состояние: блок с контентом по центру, полосы меню и футера от края экрана до края. А вот при уменьшении пропорция сохранялась бы. NMitra margin: 0 auto; по центру выравнивает. Я предупреждала, что будет не просто. В вашем случае нужно обладать довольно приличным багажом знаний, чтобы код переделать и чтобы всё корректно отображалось, потому что шаблон не стандартный. Переделывать всегда сложнее, чем писать с чистого листа. Александр Кувшинников Спасибо! Я его и так полностью переделал практически, за исключением тех стилей, которые прописаны в файлах Google. С CSS, думаю, не очень сложно будет.
Вопрос: «резиновый» сайт и адаптивный веб-дизайн — понятия разные или одно и тоже?
Посмотрел исходники некоторых сайтов с RWD, шрифты у них прописаны в px, а вот ширина в процентах. Александр Кувшинников Как оказалось — достаточно сложно. В том плане, что если я прописываю max-width для выше указанных селекторов, длина меню и футера становится тоже равной 1000 px. А хочется, чтобы эти составляющие были на всю ширину монитора (такой дизайн). В остальном все достижимо: @media пропишу, значения шрифтов, заголовков и т.д. сменю. Несколько часов сижу и никак не могу «догнать» как растянуть на всю ширину монитора меню и подвал — от края до края.

Еще один вопросик в #header-inner «вставлено» изображение. Как сделать, чтобы став «резиновым», оно не потеряло своего качества?

Источник