CSS + Frontend

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

Частичное решение: делаем всё гибким

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

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

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

- Creating Sliding Composite Images;

- Foreground Images That Scale With the Layout.

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

Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.

<h1 id="logo"> 
<a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/>
</a> </h1>

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

img {max-width: 100%;}

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.

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

Ещё один способ: отзывчивые изображения

Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.

Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:

<script src="picturefill.js"></script>

Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.

Теперь вы можете использовать следующий код, для того чтобы указать браузеру какие изображения нужно отображать, в зависимости от размера окна:

<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">

Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.

Для более явного контроля над изображениями существует элемент picture.

Интересная фича для iPhone

В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.

Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Структурные элементы */
#wrapper{
width: 80%; 
margin: 0 auto; 
background: #fff; 
padding: 20px;
}
#content{
width: 54%; 
float: left; 
margin-right: 3%;
}
#sidebar-left{
width: 20%; 
float: left; 
margin-right: 3%;
}
#sidebar-right{
width: 20%; 
float: left;
}

mobile.css (дочерний):

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.

О других особенностях адаптивной верстки в CSS в статье о нетривиальных моментах разработки фронтэнда на CSS.

Адаптивная вёрстка с помощью медиазапросов CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.

Пример:

@Media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}

@Media screen and (max-width: 600px) {

.aClassforSmallScreens {
clear: both; font-size: 1.3em;
}
}

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:

@Media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}

@Media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}

@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}

Также значения медиазапросов можно комбинировать:

@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();

// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>

Низкий поклон всем тем, кто дочитал. Вы герои

Я знаю, что вы могли подумать: "Математика?! Фу, с глаз моих долой". Но спросите себя — хватит ли у вас силы воли противиться удовлетворению от идеально выровненных вложенных друг в друга контейнеров?

Знаете, после того, как я написал статью о различных хитростях CSS (она была подобрана несколькими публикациями), я увидел, что на сайт приходит трафик по таким ключевым словам, как «как центрировать элемент div», что забавно, потому что я никогда не упоминал об этом в статье конкретно. Но это показывает, что разработчикам нужен доступ к быстрым фрагментам кода, которые можно легко реализовать повторно.

Таким образом, это будет предпосылкой для этого урока.

Update: Мне удалось написать подробное руководство по центрированию элементов в CSS.

Я сосредоточусь на теме математических функций CSS в контексте достижения различных результатов компоновки. Например, Как создать адаптивный контейнер с помощью нескольких строк CSS, как добавить адаптивный padding и как заставить сайдбар вести себя как сайдбар.

Давайте взглянем.

calc()

Функция calc() поддерживает четыре арифметические операции: сложение (+), вычитание (-), умножение (*) и деление (/). Эта функция в основном используется для расчета динамической ширины и высоты контейнера для создания адаптивного layout.

Пример кода:

И вот такой результат:

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

Давайте рассмотрим конкретный пример использования display: flex;. Наша цель — создать рядом 3 элемента, зависящих от ширины контейнера (100%). Мы также хотим добавить отступ в 30 пикселей между каждым элементом, и, конечно же, нам необходимо, чтобы они были отзывчивыми!

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), и там вы сможете изменить размер экрана, чтобы увидеть, как это работает.

Поскольку мы хотим иметь отступ в 30px между каждым элементом, мы вычитаем 90 пикселей из ширины контейнера (100%) и делим его на 3, чтобы указать, сколько элементов у нас есть.

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

min()

Функция min() используется для установки наименьшего допустимого значения. Она принимает два разных значения, разделенных запятой, и поддерживает арифметические выражения.

Допустим, вы указали font-size: min(25px,1vw); — в этом примере font-size никогда не будет больше 25 пикселей и будет уменьшаться до 1vw в зависимости от размера viewport.

Мы также можем использовать min() для управления шириной элементов контейнера.

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана.

В этом контексте div элемент внутри нашего контейнера не может превышать 800 пикселей в ширину, несмотря на то, что контейнер имеет максимальную ширину 1000 пикселей.

max()

Функция max() позволяет нам сделать прямо противоположное. Из двух значений, которые мы указываем внутри max() — большее из них будет иметь приоритет.

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана  на меньший, чтобы посмотреть, что произойдет.

Как видите, контейнер соблюдает width: 100%;, но не опускается ниже указанной отметки 200 пикселей, так как это самое большое значение для контейнера.

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

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана на меньший, чтобы посмотреть на это в действий.

Как видите, несмотря на изменение ширины viewport, кнопки всегда сохраняют свои поля в 4 пикселя.

clamp()

Функция clamp() используется для определения допустимого диапазона различных значений элемента макета: minimum, preferred и maximum. Чаще всего clamp() используется для установки диапазона допустимых значений в типографике, чтобы создать эффект fluid typography.

По сути, это кульминация функций min() и max().

Например:

font-size: clamp(1rem, 4vw + 1rem, 4rem);

И вот как это выглядит:

В этом контексте, мы стилизуем наш заголовок h2 с минимальным значением 1rem, максимальным 4rem и устанавливаем предпочтительный размер 4vw (единицы viewport) + 1rem. Как вы уже заметили, из приведенного выше демо, по мере изменения области просмотра изменяется и размер шрифта заголовка.

На этом мы заканчиваем знакомство с наиболее широко поддерживаемыми математическими функциями в CSS.

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

Создание адаптивного sidebar с помощью Grid

Можете ли вы реализовать полнофункциональный адаптивный sidebar всего двумя строками CSS? Конечно.

Для этого демо мы создадим адаптивный sidebar, используя display: grid; и настроим отзывчивость с помощью grid-template-columns. В частности, мы будем использовать функции fit-content и minmax() для установки наших ограничений.

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана, чтобы посмотреть, что произойдет.

Давайте разберемся, что здесь происходит.

Сначала, мы применяем fit-content, чтобы объявить предпочтительный размер нашего sidebar. Значение, которое мы указываем здесь, будет либо увеличивать боковую панель (в зависимости от размера viewport), либо уменьшать ее на небольших экранах. Все время учитывая количество контента, которое у вас есть на боковой панели.

После этого мы применяем minmax(), потому что мы не хотим, чтобы боковая панель перекрывалась областью контента на странице. В нашем случае для параметра установлено значение 55vw, которое будет использоваться для мобильного дисплея, и 35ch, которое будет использоваться для больших viewports. И, наконец, мы применяем the Grid-specific fraction unit, чтобы заполнить пространство, когда это позволяет viewport.

Применение адаптивного Gap для Flexbox Layouts

Это аналогичный пример адаптивного padding, который мы рассматривали ранее. Но для этого демо мы используем flexbox и свойство gap вместе с clamp().

Пример кода:

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте поиграть с размером.

Указав gap: clamp(5px, 1vw, 25px); мы говорим браузеру адаптировать gap между каждой колонкой в зависимости от размера viewport. Итак, если размер окна превышает 1vw — gap увеличивается до 25 пикселей, тогда как маленький viewport уменьшит его до 5 пикселей (например, на мобильных устройствах).

Кстати, вы могли заметить, что я использовал интересное свойство для центрирования блоков, это place-content: center;. Это сокращенное свойство, которое поддерживает позиционирование содержимого в различных направлениях. Подробнее об этом можно прочитать на MDN.

Can I Use: Поддержка тут как тут

Если мы посмотрим на данные Can I Use для математических функций — поддержка явно есть. IE их не поддерживает, но мы также знаем, что IE прекращает работу. В июне 2022 года, если быть точным.

Использование математических функции CSS с переменными

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

Я не следую style guide и не работаю над фреймворком.

Но вполне возможно использовать объявления переменных для достижения еще больших результатов, особенно для сложных структур layout.

Заключение

Были бы вы рады попробовать некоторые из этих концепций в своем следующем проекте?

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

Спасибо за прочтение этой статьи!

Наш телеграм https://t.me/havaevau_webstudy

Какая его роль?

Прелоадер — это небольшая анимация, которую человек видит когда заходит на веб-страницу, другими словами — это индикатор загрузки.

Это значимый элемент в веб-разработке с точки зрения юзерфрендли. Если человек заходит на "тяжёлый сайт", напичканный скриптами, файлами и т.п., ему нужно сказать что "всё норм, сайт загружается, подожди".

Сказать это красиво помогут прелоадеры. Вот несколько примеров, которые сможет реализовать даже начинающий.

1. Лесенка загрузки

Исходный код на Codepen - https://codepen.io/ispal/pen/mVaaJe

2. Прелоадер на CSS с использованием sass map для определения цвета

Исходный код на Codepen - https://codepen.io/hexagoncircle/pen/eZawWv

3. А как вам такое?

Исходный код на Codepen - https://codepen.io/derekmorash/pen/grvOZx

4. Этот прелоадер был сделан для веб-приложения из сферы здравоохранения

Исходный код на Codepen - https://codepen.io/chrissamuels/pen/WNybqm

5. Сразу несколько прелоадеров, сделанных с помощью SVG анимации

Исходный код на Codepen - https://codepen.io/nikhil8krishnan/pen/rVoXJa

Телеграм - https://t.me/havaevau_webstudy

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

Шарнир работает мягко: чтобы открыть крышку даже одной рукой, не нужно придерживать корпус. Чтобы показать коллеге или клиенту презентацию, достаточно раскрыть экран на 180°. Это удобно и для работы лежа, и для подставок, которые требуют определенного угла обзора.

Также отметим 9 портов: USB-A, USB-C, HDMI, слот для карты памяти — можно забыть о переходниках.

В TECNO MEGABOOK K15S предустановлен Windows 11. Ноутбук готов к работе сразу после включения. Никаких лишних установок и обновлений. Все настроено и оптимизировано для вашей многозадачности.

Экран: яркая картинка и комфорт ночью

Экран — 15,6 дюйма, IPS-матрица с разрешением Full HD. Углы обзора отличные: изображение остается четким, даже если смотреть сбоку, цвета не искажаются. Есть антибликовое покрытие. Тестировали ноутбук при разном освещении: можно спокойно работать у окна. Когда солнце бьет прямо в экран, текст по-прежнему остается читаемым, картинки не искажаются. Это редкость в бюджетных моделях.

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

Стеклокерамический крупный тачпад — 15 см. Он не залипает, не промахивается, срабатывает с первого касания. Не возникает дискомфорта, даже если несколько часов редактировать документы без мышки. После перехода с других устройств немного непривычно, что тачпад работает в двух направлениях: нижняя часть отзывается нажатием, верхняя — касанием.

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

Производительность: рендерим видео, открываем вкладки

Ноутбук работает на AMD Ryzen 7 5825U (опционально можно выбрать версию техники Intel Core i5-13420H). Восьмиядерный AMD с поддержкой 16 потоков подходит для ресурсоемких операций вроде рендеринга или работы с большими массивами данных. Встроенная графика Radeon справляется с редактированием видео в Full HD или играми.

Во время монтажа 30-минутного ролика в DaVinci Resolve и параллельной работе в Photoshop с несколькими большими PSD-файлами система сохраняла стабильность. Не было ни зависаний, ни заметного падения производительности. Ноутбук уверенно держит в фоне 10 приложений одновременно. Если запущены браузер с 20 вкладками, видеозвонок в Telegram, Excel с объемной таблицей и софт для монтажа, система не тормозит и не перегревается. Переход между окнами остается плавным, ничего не «проседает», даже при одновременном скачивании файлов и редактировании видео.

Базовая комплектация включает 16 ГБ оперативной памяти в двух слотах. При необходимости можно легко увеличить этот показатель до 32 ГБ, заменив стандартные модули на более емкие. Помимо установленного SSD на 1 ТБ предусмотрен дополнительный слот, поддерживающий диски объемом до 2 ТБ.

Чтобы во время нагрузки системы охлаждения не выходили из строя, в ноутбук встроен эффективный вентилятор, способный рассеивать до 35 Вт тепла. Устройство не греется, его спокойно можно держать на коленях. Это решение дополнено тремя режимами работы, которые переключаются простой комбинацией клавиш Ctrl+Alt+T. Тихий режим идеален для работы ночью или в общественных местах, сбалансированный подходит для повседневных задач. Производительный, на котором запускали рендеринг видео и игры, практически не шумит.

Автономность: 15 часов без подзарядки

Протестили автономность MEGABOOK K15S в условиях, знакомых каждому деловому путешественнику. Утром перед вылетом зарядили ноутбук до 100% и взяли его в рейс Москва — Калининград. В зале ожидания провели созвон, потом три часа смотрели сериал и в дороге до отеля редактировали документы. К моменту приезда оставалось 40% заряда: хватило бы еще на пару часов продуктивной работы.

MEGABOOK K15S может автономно работать до 15 часов и позволяет не оглядываться на индикатор заряда. Заявленное время достигается при типичном офисном использовании: одновременная работа с документами в Word и Excel, ведение переписки, видеоконференции, веб-серфинг.

Если все же понадобится, за  час восполняется до 70% батареи. Компактный адаптер мощностью 65 Вт на базе нитрида галлия поместился даже в карман пиджака. Один блок питания заряжает и ноутбук, и смартфон, и наушники. Экономия места: не нужно никаких дополнительных проводов.

Звук, который реально слышно

В TECNO MEGABOOK K15S установлены два мощных динамика по 2.5 Вт. Звук с глубокими низами, без пластикового дребезжания, объемный. Благодаря DTS можно смотреть видео даже в шумном помещении. В тестах специально включали сцены с шагами и выстрелами: локализация настолько точная, что в наушниках нет необходимости.

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

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

Для тех, кто предпочитает гарнитуру, идеально подойдут беспроводные наушники TECNO FreeHear 1 из экосистемы бренда. Когда не хотелось делиться разговорами с окружающими, подключали их. Чистый звук с акцентом на средние частоты, 11-мм драйверы, которые выдают неожиданную детализацию. Музыку слушать приятно: и фоновый плейлист на телефоне, и вечерний сериал на ноутбуке. Автономно работают наушники 6 часов, с кейсом — до 30 часов. 

Bluetooth 5.4 обеспечивает стабильное соединение на расстоянии до 10 метров. Удобная C-образная форма разработана специально для длительного ношения — после восьмичасового рабочего дня в ушах не возникает дискомфорта. Наушники поддерживают одновременное подключение к ноутбуку и смартфону. Переключение между устройствами происходит быстро и без заминок.

Через фирменное приложение Welife можно выбрать один из четырех эквалайзеров и отследить местоположение гарнитуры в случае утери. А еще кастомизировать виджет для управления наушниками. Функция настройки персонализированного дизайна доступна для устройств на Android и позволяет гибко изменить внешний вид окна подключения: вплоть до установки фоновой картинки или собственного фото.

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

Бесшовная синхронизация со смартфоном

Благодаря функции OneLeap ноутбук синхронизируется со смартфоном TECNO. Подключение происходит за пару секунд: достаточно один раз подтвердить сопряжение. После этого открывается доступ к бесшовному переключению между устройствами — объединенному буферу обмена, дублированию экранов и передаче файлов без кабелей и пересылок в мессенджерах.

Функция выручила, когда нужно было открыть приложение, у которого нет веб-версии. Удобно работает и буфер обмена: скопировал текст на одном устройстве — вставил на другом. Например, код, полученный в сообщении на телефоне, вводится в браузере на ноутбуке. Экономит минуты, а иногда и нервы. А когда в дороге пропал Wi-Fi, ноутбук сам подключился к мобильному интернету через смартфон.

TECNO CAMON 40 и сам по себе — мощный рабочий инструмент.  Смартфон выделяется камерой высокого качества 50 Мп, ярким AMOLED-экраном 120 Гц и множеством функций, которые упрощают процесс мобильной съёмки и использование искусственного интеллекта TECNO AI.

Телефон работает на HIOS 15.0.1 на базе Android 15.В фирменную оболочку встроен искусственный интеллект:

• Голосовой помощник Ella. Отвечает на вопросы, помогает с задачами и управлением устройством.

• Решение задач. Наводите камеру на задачу, ИИ решает ее.

• AI Редактор фотографий. Интеллектуальная обработка в одно касание.

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

Технические характеристики

• Процессор и память. 8 ядер, 16 потоков, Кэш L3 16 МБ, частота до 4.5 ГГц Графический процессор AMD Radeon™ graphics SSD 512 ГБ или 1 ТБ, М.2, 2280, PCle 3.0 Nvme DDR4 16 ГБ, 3200 МГц.

• Дисплей. 15.6", TFT, Full HD (1920×1080), 16:9, 280нит, 45% NTSC, 16.7 млн цветов, 60 Гц, 141 ррі.

• Веб-камера. 1 Мп, шторка приватности.

• Порты. 9 портов: 1*TF Card (microSD), 1*HDMI 1.4, 1*USB-A 3.1,

  1*USB-A 3.2, 1*3.5mm аудиовход, *Ethernet RJ45 до 1 Гбит, 2*Туре-С (Full Function), 1*слот для замка Kensington.

• Другое. Сканер отпечатка пальца в кнопке питания. Клавиатура с подсветкой (4 уровня яркости). Тачпад с поддержкой одновременно 4 касаний.

• Батарея. 70 Вт∙ч (6150 мА∙ч), Li-Pol, 11.55 B 65 Вт Type-C GaN, 20 В, 3.25 А, кабель 1.8 м (Туре-С-Type-C).

• Габариты. 17.3 мм (высота), 359.5 мм (ширина), 236 мм (глубина).

• Вес. 1,7 кг.

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

КУПИТЬ НОУТБУК TECNO