Подскажите, пожалуйста, как сделать такой функционал: В зависимости от ширины экрана, блок будет менять свои значение. Но!, есть нюанс — Имею блок с огромной шириной: .slides = 25000px. Размер .wrapper и .slider = 100% Размер экрана будет 1500px Нужно чтобы бралось значение 1500px и применялось к классу .slide
Slide 1 Отслеживать
задан 7 июл 2021 в 15:45
17 5 5 бронзовых знаков
Ширина экрана — это width: 100vw; (Viewport Width)
7 июл 2021 в 15:53
Если вообще ни чего не писать в css а в html вписать только div он будет 100% ширины
8 июл 2021 в 0:42
Сортировка: Сброс на вариант по умолчанию
Вот если я вас правильно понял
.slide
Уже вижу вопрос в ваших глазах , «что за такая единица измерения vw».
vw — относительная единица измерения блока ,1vw эквивалентно 1% ширины окна браузера. Т.е. если взять 100vw , то блок будет размером 100% окна браузера.
Важно помнить, что это vw берёт не размер экрана , а именно размер окна браузера.
Узнайте, как определить размеры экрана пользователя с помощью JavaScript для адаптивного дизайна и улучшения пользовательского опыта.
Алексей Кодов
Автор статьи
2 июня 2023 в 11:29
Определение размера экрана пользователя является важной задачей в веб-разработке, так как это позволяет адаптировать контент и дизайн сайта под разные устройства, что улучшает пользовательский опыт. В этой статье мы рассмотрим, как использовать JavaScript для получения размеров экрана пользователя.
Для того, чтобы определить размеры экрана пользователя, можно воспользоваться свойствами window.innerWidth и window.innerHeight . Они представляют собой ширину и высоту окна браузера соответственно (в пикселях), включая полосу прокрутки (если она есть).
const width = window.innerWidth; const height = window.innerHeight; console.log("Ширина экрана: " + width + "px"); console.log("Высота экрана: " + height + "px");
�� Этот способ является наиболее простым и универсальным, так как он работает во всех современных браузерах.
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Также можно использовать свойства screen.width и screen.height для определения размеров экрана. Они представляют собой ширину и высоту экрана пользователя (в пикселях), но не учитывают полосу прокрутки.
const screenWidth = screen.width; const screenHeight = screen.height; console.log("Ширина экрана: " + screenWidth + "px"); console.log("Высота экрана: " + screenHeight + "px");
�� Отметим, что этот метод может не подходить для определения размеров окна браузера, так как он учитывает только размеры экрана устройства. Однако он пригодится, если вам нужно знать размеры всего экрана.
Теперь вы знаете, как определить размеры экрана пользователя с помощью JavaScript. В зависимости от конкретной задачи можно использовать разные методы: window.innerWidth и window.innerHeight для определения размеров окна браузера или screen.width и screen.height для получения размеров всего экрана. Удачи в вашей веб-разработке! ��
CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.
Свойство width записывается так:
selector
Ширина может быть автоматической — если её не указать, то она будет иметь значение auto . В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.
Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px , % , em , rem .
Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.
А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.
В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.
Если пока не понимаете, зачем здесь фигурные скобки — прочитайте о селекторах.
Один из вариантов — чтобы ограничить ширину текстового блока и улучшить читаемость на больших экранах. Например, когда вы делаете блог и хотите, чтобы текст не растягивался на всю ширину экрана. Как на этой странице.
Вот так мы стилизуем элемент с шириной 50%, который находится по центру экрана.
Относительные единицы измерения помогают создавать адаптивные страницы. Попробуйте сами — контейнер будет тянуться вместе с окном браузера.
.container
Другой вариант использования — создать сетку на основе флексбоксов с фиксированными размерами колонок.
.flex-container < display: flex; >.flex-item
Это очень простой пример сеток, но если интересно, прочитайте наше пошаговое рукововодство по созданию адаптивных сеток.
С шириной всё вообще непросто — иногда с непривычки могут произойти странные ситуации, из-за которых придётся долго гуглить. Давайте о них поговорим.
Виновато свойство box-sizing , которое по умолчанию имеет значение content-box .
Почему так. Когда вы задаете ширину элемента с помощью свойства width , она применяется только к содержимому элемента и не учитывает его отступы, поля ( padding и margin ) и границы ( border ). Это может привести к тому, что общая ширина элемента будет больше, чем ожидалось.
Например, у нас есть такой элемент с классом box :
Контент И мы применяем следующие стили — ширина 100 пикселей, отступы по 10 пикселей со всех сторон и вдобавок пятипиксельную границу.
Тогда вспоминаем математику и считаем — общая ширина элемента с заданной шириной 100px будет на самом деле равна 130px .
100px + 2 × 10px (отступы) + 2 × 5px (границы) = 130px 
Как починить. Нужно включить отступы и границы в заданную ширину элемента. Для этого используйте свойство box-sizing со значением border-box :
Теперь общая ширина элемента будет равна 100px , так как отступы и границы будут включены в указанную ширину. Такое поведение следует учитывать при вёрстке и подготовке макетов, чтобы в результате не оказалось непредвиденных сюрпризов.
Если ширина нашего элемента случайно оказалась больше, чем у родительского, то он не вместится. И будет как-то так:
Создаём два вложенных элемента с классами parent и child .
Элемент И стилизуем их. У parent ширина 100 пикселей, а у child — 200.
.parent < width: 100px; border: 1px solid black; >.child
Выше вы уже видели, что произойдёт в этом случае — элемент child с синим фоном будет выходить за пределы родительского элемента с рамкой.
Конечно, иногда так поступают специально — например, чтобы иллюстрации в блоге выходили за пределы колонки с текстом и были покрупнее.
Хотя если указать только width без ограничений, то при уменьшении окна картинка не вместится.
Теперь дочерний элемент не будет выходить за пределы родительского элемента, даже если его ширина увеличивается.
Ну и не забывайте тестировать сайты и проверять их в разных браузерах — это важный навык для всех веб-разработчиков в любом году.
�� Все браузеры поддерживают свойство width , так что смело пользуйтесь.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .
Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись «Дата обновления» и т.д.
Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом
@media (max-width: 930px) < /* это будет показано при разрешении монитора до 930 пикселей */ .content-wrapper /* основное содержимое занимает всё пространство окна */ > @media (max-width: 930px) and (min-width: 470px) < /* для разрешения экрана от 470 до 930 пикселей */ aside /* боковая колонка смещается согласно расположению в HTML и меняет фон */ > @media (max-width: 469px) < /* если максимальное разрешение экрана составит 469 пикселей */ body /* меняется шрифт */ aside /* боковая колонка исчезает */ >
Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)’.
CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:
@media all and (orientation:landscape) < /* стили для пейзажа */ >@media all and (orientation:portrait) < /* стили для портрета */ >
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 «вставлено» изображение. Как сделать, чтобы став «резиновым», оно не потеряло своего качества?
Буду Вам очень признателен за помощь или, хотя бы, за совет в какой направлении трудиться.
P.S.: мой блог полностью построен на основе Ваших статей! Спасибо Вам!:-) NMitra Приблизительный код:
По поводу фона: берёте в самом хорошем качестве и см. http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html#size NMitra «резиновый» сайт и адаптивный — разные. Но без «резинового» не сделать адаптивного. Другими словами адаптивный — это «резиновый» с @Media. Александр Кувшинников content-wrapper вот именно такого нет. Есть content-outer. Обязательно писать для всего шаблона max-width?
Один знающий человек порекомендовал мне прописать min-width. Я сделал так, как Вы мне написали — меню и футер становятся в 1000px.
Перепробовал все.
Эта единственная проблема на данный момент. NMitra Зачем min-width? Это не нужно
body min-width: 1000px;
>
Это значит, что и на мониторах, и на мобильниках сайт будет занимать 1000px. А нам нужно: на мониторах — 1000px, на мобильных — 400px.
У вас судя по всему
.content-outer, .content-fauxcolumn-outer, .region-inner <>
Я же приводила общий пример. Александр Кувшинников Спасибо! Работаем.
Вопрос по поводу того, как сделать адаптивными изображения находящиеся в постах, а также миниатюры на большие картинки, при клике на которые срабатывает стандартный Lightbox. Где прописывать стиль? Общий или для каждого отдельно?
Еще хотелось бы узнать ваше мнение, касаемо данного сервиса, облегчающего создание «адаптивного» шаблона. Вот еще обзорная статья.
Заранее благодарен, Наталья! NMitra См. http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html
Для стандартного Lightbox тоже вроде (где-то видела с белым фоном) править можно стили CSS.
По-поводу сервиса ничего сказать не могу, попробуйте, не зря же их разрабатывают. ) Александр Кувшинников Здравствуйте!
Скажите, пожалуйста, а как сделать ссылку, как у Вас — «зафиксировать панель»? Принцип ее фиксации знаю, интересно просто как работает сама ссылка.
И еще один, может быть, глупый вопрос — как избавиться от CSS-стилей, тянущихся с гугловских, сторонних документов, где прописано буквально все? Просто, я сейчас работаю с шаблоном, переписываю все стили под себя, начинаю просматривать, а изменений никаких, смотрю исходники — стили с внешнего документа «работают». Например, меню: добавляю HTML, оформляю все, как надо (не добавляю виджет меню), но все перекрывает селектор .widget ul, . li и т.д.
Аналогично, к примеру еще, #blog-page. NMitra Панель щёлкается по тому же принципу http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html . Её размещение http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#plavayushaya . Она находится довольно высоко на странице, поэтому сразу её в том же виде и фиксирую.
Я когда делала свой шаблон, снесла все стили и в качестве основы использовала это https://sites.google.com/site/spargalka1/rating/minima.xml?attredirects=0&d=1
Но можно пойти более лёгким путём. Прописывать, например для меню,
.tabs-inner <>
со своими данными. Или вместо класса меню присваивать id — он приоритетный
Александр Кувшинников Просмотрел Ваши исходники, некоторые вещи сделал по аналогии. Я не стал менять
body min-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner min-width: 1000px;
max-width: 1000px;
_width: 1000px;
>
на max-width: 1000px, так как почитал все Ваши комментарии, там Вы рекомендуете вставить другой код (body padding-left: 20px; padding-right: 20px;>
html body .content-outer ) в раздел /* Content */, плюс ко всему всем основным разделам я прописал максимальную ширину.
Скажите, я правильно сделал?
Касаемо структуры шаблона: работать нужно с рамками блоков, такими как, например, content-outer, column-center-outer, column-left-outer и т.д.?
Я вот именно что присваивал id-шник! NMitra Этот код для стандартных шаблонов, а у вас совсем не такой.
В Blogger довольно много вложенных div, которые не всегда нужны. Код старается предусмотреть все возможные случаи. Работать нужно с теми селекторами, которые решают вашу задачу. Я смотрю через Mozilla Firefox, правая кнопка — «Исследовать элемент». Простой Да с этим можно посидеть поработать. Александр Кувшинников Сделал адаптивный шаблон из minima, что Вы мне скинули. Вопрос: как подредактировать комментарии — убрать двоеточие, сделать склоняемую надпись?! NMitra Уже не помню как именно звучит надпись, что-то вроде
:
Анонимный а для хтмл 4.01 есть подобное? NMitra Так это CSS. Поддерживают и многие мобильники. Иван Шабанов Есть решение http://www.cms-sd.ru/stati/javascript_i_jquery/htmlscale_mashtabirovanie_stranici_pod_shirinu_ekrana Женьяя Савиныххых Спасибо за Ваши отличные уроки! NMitra Благодарю за отзыв, Женьяя! Приятно слышать! Анонимный Супер статья! Помогли! Спасибо! Анонимный блин а я чайник ! не могу понять ! открыл template.css и кинул @media (max-width: 930px) < /* это будет показано при разрешении монитора до 930 пикселей */
.content-wrapper /* основное содержимое занимает всё пространство окна */
>
@media (max-width: 930px) and (min-width: 470px) < /* для разрешения экрана от 470 до 930 пикселей */
aside /* боковая колонка смещается согласно расположению в HTML и меняет фон */
>
не работает ! сайт на joomla шарю очень мало !((( NMitra Покажите адрес сайта с изменениями. NMitra Для мобильных нужно добавить мета-тег Анонимный Здравствуйте!
Вопрос если позволите. Не совсем понял как, куда вставлять, почитал комментарии Вы так пытались всем объяснит, но всё равно не понял толком. Ну с линком ясно, как и при простом способе (когда один стиль) просто внешний файл со стилями. Ну да ладно. Вопрос в следующим. Как он будет понимать какой стиль использовать. Что ему помогает понять какой экран.
Где какая-то привязка или ссылка на что-то или ещё что-то. Вот это совсем я не понял.
Буду благодарен, если найдёте время для ответа на мой вопрос.
NMitra Здравствуйте!
Куда вставлять:
1) между тегами
2) в файл CSS
3) в тег link как отдельный файл CSS
В JavaScript также есть возможность понять ширину экрана/окна браузера. Понимает же в CSS благодаря конструкции
@media (max-width: 50em)
Если непонятно объяснила, отпишитесь, пожалуйста. Анонимный Здравствуйте!
Спасибо Вам за ответ.
Значит если я понял правильно то это будет выглядеть так.
То есть при 50em размер дива будет 100х100. И при экране 950em размер дива будет 1111х1111.
И зачет никаких привязок, никаких связок указаний не надо, он сам поймёт.
Если я написал что-то очень глупое. Не судите строго.
NMitra Здравствуйте,
1) нет двоеточий в height
2) нет кавычек перед/после селектором .q
3) max-width не ограничена min-width, а значит в приоритете тот, который ниже
4) 950em — это какое-то очень огромное число
Спасибо за неглупые вопросы! Анонимный Здравствуйте!
Благодарю Вас за ответ. Извините не мог написать раньше
Если можно я задам Вам ещё вопрос.
А как можно проверить работает ли это. Если имеется только один монитор.
Или надо искать другие.
И ещё может не по теме, но если Вас не затруднит и Вы знаете. Вы не могли бы рассказать как быть. Имею страницу сайта. Но из того что есть многое ИЕ старые не понимают. Я сделал второй вариант где ПХП и Ява. Так вот. Как мне прописать что бы отображалось то что нужно там где надо. Если знаете поделитесь. Если же нет ни беда. Нарою.
Спасибо Вам.
NMitra Здравствуйте, изменяйте не монитор, а окно браузера, вот так http://4.bp.blogspot.com/-r54bZIOaVi0/ULNEWvbUNEI/AAAAAAAADhg/0whkWnT-_7I/s400/ekran.gif Ещё можно уменьшить/увеличить размер шрифта: (CTRL +) или (CTRL -).