Как писать стили css

25.11.2023

Медиазапросы — CSS: Адаптивность сайта

Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств.

Медиазапросы записываются следующим образом:

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

Ориентация экрана

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

landscape . Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
portrait . Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

 @media (orientation: landscape)  /* При горизонтальной ориентации фоновым цветом сайта будет белый */ body  background: #FFF; > > @media (orientation: portrait)  /* При вертикальной ориентации фоновым цветом сайта будет чёрный */ body  background: #000; > >

Разрешение экрана

При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

 /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */ @media (max-width: 1400px)  /* Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */ > @media (max-width: 990px)  /* Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */ > @media (max-width: 770px)  /* Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей. Это множество мобильных устройств */ >

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

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

Стили по умолчанию.
Стили для условия медиазапроса max-width: 1400px .
Стили для условия медиазапроса max-width: 990px .
Стили для условия медиазапроса max-width: 770px .

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

 /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */ @media (min-width: 770px)  /* Стили для устройств, у которых ширина viewport больше или равно 770 пикселей */ > @media (min-width: 990px)  /* Стили для устройств, у которых ширина viewport больше или равно 990 пикселей, но меньше 1400 пикселей. */ > @media (min-width: 1400px)  /* Стили для устройств, у которых ширина viewport больше или равно 1400 пикселей */ >

Логические операторы

Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:

Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and . Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:

 @media (orientation: portrait) and (min-width: 600px)  .container  /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:

 @media (orientation: portrait), (min-width: 600px)  .container  /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not . Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not .

 @media not all and (orientation: landscape)  .container  /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

Использование медиазапросов при подключении CSS

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

lang=«ru»> charset=«UTF-8»> name=«viewport» content=«width=device-width, initial-scale=1.0»> Подключение CSS файлов rel=«stylesheet» href=«style.css»> rel=«stylesheet» media=«screen and (min-width: 750px)» href=«style750px.css»>

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

10 способов стилизации React-приложений

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

В этой статье мы разберем 10 различных способов добавления стилей в React-приложение:

Инлайн-стили

Инлайн-стили указываются прямо на самом DOM-элементе в атрибуте style. Мы можем передавать их в JSX в виде объекта, что удобнее, чем перечисление в строке через точку с запятой.

import React from "react"; const container = < padding: 12, background: 'red' >const Homepage = () => < return ( > Welcome to React
 This is a simple homepage
 
 ); >; export default Homepage;

Внешние таблицы стилей

Классический способ использования стилей — подключение их из внешних css-файлов, его вполне можно использовать и в React-приложении. Единственная проблема — сложно изолировать стили отдельных компонентов друг от друга.

Создаем обычную таблицу стилей:

.container

И импортируем ее в компонент:

 import React from "react"; import "homepage.css"; const Homepage = () => < return ( Welcome to React
 This is a simple homepage
 
 ); >; export default Homepage;

Утилита create-react-app также добавляет PostCSS-обработку стилей.

CSS-модули

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

Create-react-app поддерживает работу с CSS-модулями.

Можно использовать одно и то же имя класса, не заботясь о возможных конфликтах. Например, мы можем использовать класс .container в разных файлах и у каждого компонента будет контейнер с собственным оформлением:

// homepage.module.css .container < padding:12px; background:red; >// contactpage.module.css .container

Импортируем нужный файл в компоненте:

import React from "react"; import styles from "./homepage.module.css"; // Импорт CSS-модуля import "./another-stylesheet.css"; // Импорт обычного файла стилей const Homepage = () => < return ( > Welcome to React
 This is a simple homepage
 
 ); >; export default Homepage;

CSS-препроцессоры

Мы можем использовать Sass, Scss, Less, Stylus и другие препроцессоры CSS в React-приложениях, используя специальные лоадеры для Webpack. К сожалению, они не поддерживаются в Create-react-app из коробки.

Например, чтобы использовать Scss или Sass нам нужно установить node-sass:

npm i node-sass

Styled Components

Пакет styled-component позволяет писать стили как обычный CSS-код, пользуясь при этом всеми преимуществами JS.

Перед началом работы нужно установить npm-модуль:

npm i styled-components

Стили создаются прямо в файле компонента:

 import React from "react"; import styled from "styled-components"; const Container = styled.div` padding: 12px; background: red; `; const Homepage = () => < return ( Welcome to React
 This is a simple homepage
  ); >; export default Homepage;

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

React JSS

JSS позволяет писать CSS прямо в JS декларативно, без конфликтов и с возможностью переиспользования.

Установите react-jss с помощью npm:

npm i react-jss

Стили создаются с помощью функции createUseStyles :

import React from "react"; import < createUseStyles >from "react-jss"; const useStyles = createUseStyles(< container: < padding: "20px", backgroundColor: "red" >, button: < backgroundColor: "green", color: "white" >>); const Homepage = () => < const classes = useStyles(); return ( > Welcome to React
 This is a simple homepage
 
 ); >; export default Homepage;

Для применения стилей используйте хук useStyles .

Radium

Radium — это набор инструментов для создания инлайновых стилей с помощью JavaScript. Radium использует tree-shaking для удаления неиспользуемого кода.

JavaScript не дает возможности использовать псевдоселекторы вроде :hover, :focus и т. д. Radium решает эту проблему.

Сначала установите модуль radium:

npm i radium

А затем просто пишите нужные стили:

import React from "react"; import Radium from 'radium'; const Homepage = () => < const style = < padding:"12px", background:'red', ":hover":< background:'blue' >> return ( > Welcome to React
 This is a simple homepage
 
 ); >; export default Radium(Homepage);

Перед экспортом оберните ваш компонент в декоратор Radium .

React Shadow

React Shadow создает теневой DOM (Shadow DOM), что дает возможность использовать все плюшки инкапсуляции стилей.

Установка React Shadow из npm:

npm i react-shadow

Использование в компоненте:

import React from "react"; import root from "react-shadow"; import styles from "homepage.css"; const Homepage = () => < return (  Welcome to React
 This is a simple homepage
 
  ); >; export default Homepage;

JSX Style

jsxstyle — это инлайновая система стилей для React и Preact, которая предоставляет максимально удобный для разработчика способ стилизовать компоненты без ущерба для производительности приложения.

npm i jsxstyle

import React from "react"; import < Block >from "jsxstyle"; const Homepage = () => < return ( backgroundColor="#f5f5f5" borderRadius=> Welcome to React
 This is a simple homepage
  ); >; export default Homepage;

Утилитарные фреймворки

Утилитарные CSS-фреймворки предназначены для того, чтобы писать стили без CSS. Самый известный из них — tailwindcss.

Create-react-app не поддерживает tailwindcss из коробки, поэтому нам нужно использовать расширенные версии этой утилиты, например, CRACO.

Более подробная информация — в официальной документации.

import React from "react"; const Homepage = () => < return ( Welcome to React
 This is a simple homepage
 
 ); >; export default Homepage;

Какой способ стилизации React-приложений используете вы?

Как сверстать веб-страницу. Часть 1

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

Создаем папку с названием нашего проекта, например Whitesquare.
В ней создаем пустой файл index.html.
В папке проекта создаем папку css с пустым файлом styles.css.
В папке проекта создаем пустую папку images.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

Как будут нарезаться изображения?
Какими будут основные стили?
Какой макет у нас получится?

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

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

body < color: #8f8f8f; font: 12px Tahoma, sans-serif; background-color: #f8f8f8; border-top: 5px solid #7e7e7e; margin: 0; >input[type="text"] < background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; >button < color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; >p

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

     Whitesquare

06.03.2021, 10:08
Уже разобрался!
Александр Мальцев
08.03.2021, 15:48
Привет! Отлично!
05.10.2020, 18:50
Супер! Спасибо Вам большое за ваше время и работу.
Александр Мальцев
08.10.2020, 14:06
Спасибо! Очень приятно читать такие отзывы.
28.07.2020, 22:39

Здравствуйте. Подскажите, пожалуйста, можно ли с помощью медиа запроса «разбить» блок? при отображении на ширине 480px должен отображаться один блок с текстом, а при 1000рх и больше — он должен разбиваться на два одинаковых по ширине, по бокам страницы.
вот этот код даёт только один блок слева при 1000рх, как получить второй?

body { min-width: 480px; overflow-x: hidden; } .company__left { border-top: 8px solid #1C5395; border-bottom: 8px solid #D28C57; background-color: #FCFCFD; position: absolute; width: 365px; height: 1148px; left: calc(50% - 365px/2 - 0.5px); top: 6011px; } @media (min-width: 768px) { .company__left { height: 980px; left: calc(50% - 365px/2 - 133.5px); top: 4748px; } } @media (min-width: 1000px) { .company__left { height: 605px; left: calc(50% - 365px/2 - 317.5px); top: 4748px; } } @media (min-width: 1920px) { .company__left { width: 479px; left: calc(50% - 479px/2 - 400.5px); top: 3846px; } }

Александр Мальцев
30.07.2020, 15:31

Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье.

02.08.2020, 09:29

Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…

Александр Мальцев
03.08.2020, 14:25
Это можно выполнить с помощью CSS Flexbox и медиа-запросов.
05.08.2020, 19:04

Привет, я делаю автофилия или же автозаполнение данных и столкнулся с такой проблемой, что делать?
Вот видео :https://yadi.sk/i/iU9sBd6YiSWMYA (20 секнуд)и если не. трудно не могли бы вы телеграмм оставить?

Алексей Чернавцев
28.07.2020, 17:03

Добрый день!
Такой вопрос, применил в js

if (window.matchMedia(‘screen and (max-width: 543px)’).matches) {}

Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер

Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?

Александр Мальцев
30.07.2020, 15:24

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

window.onresize = function(){ if (window.matchMedia('screen and (max-width: 543px)').matches) {} };

Алексей Чернавцев
31.07.2020, 16:11
Большое спасибо 🙂
29.10.2019, 18:24

Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо)

29.10.2019, 00:05

Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?

  Заголовок Текст

Александр Мальцев
29.10.2019, 01:19

Привет!
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.

29.10.2019, 11:33

Медиа запросы в Bootstrap CSS

Спасибо большое за ответ, но до этого делал сайт с точно такой же сборкой, сейчас юзаю его все хорошо брейкпоинты стандартные работают.

Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)

Александр Мальцев
29.10.2019, 13:15

Это работает очень просто.

Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).

Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.

Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.

22.09.2019, 16:25

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности: /* xs (<=543px) */ @media (max-width: 575px) { . } /* sm (>=576 и <=767) */ @media (min-width: 576px) and (max-width: 767px) { . } /* md (>=768 и <=991) */ @media (min-width: 768px) and (max-width: 991px) { . } /* lg (>=992 и <=1199) */ @media (min-width: 992px) and (max-width: 1199px) { . } /* xl (>=1200) */ @media (min-width: 1200px) { . }

Добрый день! У меня такой вопросик возник по данной конструкции. Правильно ли я понял, что последняя строка @media (min-width: 1200px) {… } здесь не обязательна, т.к. после (min-width: 992px) and (max-width: 1199px) будут срабатывать наши основные стили.

Александр Мальцев
23.09.2019, 08:06

Привет! Эта строка обязательна. Если например viewport имеет ширину 1000px, то сначала сработает эта конструкция:

@media (min-width: 992px) and (max-width: 1199px) { . }

После неё сработают следующие стили, т.к. они не заключены в @media (min-width: 1200px) { … }. В этом случае они переопределят те что были, т.к. они идут после них.

17.06.2019, 10:22

Здравствуйте! Спасибо за статью… но помогите разобраться, я никак не могу понять и всё время путаюсь, каким образом делается адаптивность через @media (min-width). Я все время использую @media (max-width). Мне дают макет, я по нему делаю верстку, а потом уменьшаю экран и пишу медиазапросы @media (max-width)… Но min-width идет от меньшего к большему и у меня всё в голове «ломается», ведь изначально уже сделано всё для большего размера, а тут получается каждый брейкпоин идет к большему. Подскажите, как их правильно применять?

Александр Мальцев
17.06.2019, 14:48

«@media (min-width)» удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования «@media (min-width)».

/* дефолтные стили */ h1 { font-size: 20px; font-weight: bold; }

Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в «@media (min-width)».

@media (min-width: 576px) { h1 { font-size: 24px; } }

При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без «@media (min-width)», потом, например, с использованием правила «@media (min-width: 576px)», далее с «@media (min-width: 768px)» и т.д.

Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.

17.06.2019, 18:40

Спасибо за развернутый ответ! Я конечно, не так давно верстаю, но всё что не смотрю видео уроки, примеры и т.д., везде начинают с верстки макета как он есть, т.е. самый большой размер, а потом уменьшают. Мне стало интересно, т.е. главный CSS файл нужно начать писать для самого маленького разрешения, а потом расширять? У меня сразу в голове прокручивается картина: а как так можно подгадать всё, чтобы дойдя до самого большого размера всё сошлось с макетом, все верхние-нижние отступы и т.д. Ведь когда делаешь вначале по макету, то делаешь почти pix-to-pix, а потом уже произвольно уменьшаешь, чтобы смотрелось. А в случае с «Mobile First», получается мы наугад задаём размеры для мобильного вида и потом увеличиваем их… это ведь надо так подгадать, чтобы в итоге по макету встало *) Или на практике, это не так сложно?
P.S: нет ли у вас на сайте видео примера такой верстки?

Александр Мальцев
19.06.2019, 01:06

Таких видео примеров нет. Но, их можно поискать в Youtube по ключевой фразе «Mobile First». В случае если имеется только большая картинка по который вы строите макет, то придётся просто всё более тщательно продумывать. Начинайте создавать макет, начиная c основного каркаса и сразу под все устройства, начиная с мобильных. Потом переходите к детализации основных структурных блоков, далее к детализации того, что ещё не детализировано и т.д. При этом необходимо создавать так, чтобы готовый блок в некоторой ячейке вашего макета можно было просто перенести в другую ячейку вашего макета без изменения кода CSS. При этом если нужно «pix-to-pix», то оставляйте это под конец. В конце, когда макет будет готов под все устройства немного измените стили для больших экранов, чтобы получить его «pix-to-pix».

shohinform
17.01.2019, 23:25
можно ли написать media запрос для каждого карусела?
Александр Мальцев
22.01.2019, 15:21
Не знаю что такое «карусела». Медиа-запросы можете написать под любые размеры, так как вам нужно.
Sergey Ionov
02.06.2018, 13:43

max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
/* стили, которые будут применены к элементам страницы с рабочей областью больше 1199 пикселей */

@media (min-width: 1199px) { /* Стили CSS . */ }

Этот пример наверное стоило бы переписать так:
/* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */

@media (max-width: 1199px) { /* Стили CSS . */ }

Александр Мальцев
05.06.2018, 13:51
Спасибо за дельные замечания. Все эти моменты поправил в статье.
Sergey Ionov
02.06.2018, 13:32

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

@media (min-width: 544px), (orientation: landscape) { /* Стили CSS . */ }

Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 1200 пикселей (включительно) или ориентацию landscape.

Наверное здесь хотели написать не 1200, а 544 пикселей?
21.05.2018, 14:54

@media (mах-width: 768px)

размер экрана iphone se 1136×640 то есть по идее на портерной ориентации он должен сработать, а на альбомной — нет, но по факту получается что он срабатывает и в том и другом случае.
Если изменять окно браузера то все работает корректно, на телефонах по другому пиксели считаются?

Александр Мальцев
21.05.2018, 15:29

Познакомьтесь с тем, как работает viewport. На данном устройстве скорее всего установлен коэффициент 2 (CSS разрешение 568х320 пикселей). Т.е. один CSS пиксель формируется с помощью 4 физических пикселей.

18.11.2017, 14:42

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

Александр Мальцев
18.11.2017, 17:07
Здравствуйте! Конечно не секрет, это обычное Bootstrap меню (компонент Navbar).
02.11.2017, 23:22

Здравствуйте! Подскажите, можно ли в Bootstrap 4 задать дополнительный медиазапрос, например, для 1300px?

Александр Мальцев
03.11.2017, 16:30

Здравствуйте! Если нужно, конечно создавайте. Тут нет разницы, используете ли вы Bootstrap или нет.
Например, для экранов, имеющих минимальную ширину 1300px:

/* >=1300 */ @media (min-width: 1300px) { /* . */ }

27.02.2017, 09:42

Александр, приветствую.
Начал разбираться с медиа запросами почитал примеры на хабре попробовал ради эксперимента, и сразу же столкнулся с вопросом.
Ниже код:

     MediaQueryes        
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Просматриваем в Chrome.
По F12 открываем консоль, включаем просмотр на разных устройствах и начинаем с самого начала. BlackBerry Z30 с размерами 360 на 640 — прописали медиазапросы, все входит, при обеих ориентациях, — все отлично.
Переходим к следующему в списке BlackBerry PlayBook с размерами 600 на 1024, — прописали медиазапросы, подогнали, все отлично, возвращаемся на посмотреть, что произошло с BlackBerry Z30 — все уплыло.
А там у Хрома еще очень длинный список…

Подскажите, как в таких случаях бороться? Скорее даже вопрос во внятном пояснении принципов.

Александр Мальцев
28.02.2017, 16:49

При создании адаптивной разметки необходимо определиться с основными контрольными точками. Например, 576px, 768px, 992px и 1200px. Эти точек может быть больше или меньше в зависимости от реализуемого макета. Эти точки должны определять изменения в верстке. Т.е. до 576px должна быть одна разметка, при 576px и выше другая, при 768px и больше тоже другая и т.д.

При этом правила необходимо располагать в следующем порядке:

/* устройства (до 576px) */ /* стили. */ /* >= 576px) */ @media (min-width: 576px) { /* стили. */ } /* >=768px) */ @media (min-width: 768px) { /* стили. */ } /* и т.д. */

При этом не обязательно их ограничивать с помощью max-width. Т.е. если у вас в браузере CSS ширина рабочей области равно, например 600px. То будут применены CSS-свойства с условием min-width: 576px, т.к. они расположены после тех, которые предназначены для устройств до 576px. А стили для устройств >=768px применены не будут, т.к. текущая ширина устройства не отвечает этому условию.

Читать:

Что такое экобабл самсунг

Предыдущая запись

Как писать стили css в html

Следующая запись

Медиазапросы — CSS: Адаптивность сайта

Ориентация экрана

Разрешение экрана

Логические операторы

Использование медиазапросов при подключении CSS

Открыть доступ

10 способов стилизации React-приложений

Инлайн-стили

Welcome to React

Внешние таблицы стилей

Welcome to React

CSS-модули

Welcome to React

CSS-препроцессоры

Styled Components

Welcome to React

React JSS

Welcome to React

Radium

Welcome to React

React Shadow

Welcome to React

JSX Style

Welcome to React

Утилитарные фреймворки

Welcome to React

Как сверстать веб-страницу. Часть 1

Часть 1. Верстка стандартными средствами

Структура файлов

Предварительный осмотр

Общие изображения

Основные стили

Каркас HTML

Похожие записи