React — русскоговорящее с...
Android Developers
Python
Vue.js — русскоговорящее ...
supapro.cxx
DotNetRuChat
GNU/Linux Help
Telegram Developers
Node.js — русскоговорящее...
DevOps — русскоговорящее ...
JavaScript Noobs — сообще...
![Django [ru]](https://image.telq.org/channel_avatar_1063854692_12437233608009742_mini.jpeg){kind=avatar}
Django [ru]
Go-go!
Angular - русскоговорящее...
ntwrk
Верстка сайтов HTML/CSS/J...
phpGeeks
Kubernetes — русскоговоря...
Битрикс для разработчиков
MODX. Русскоязычное сообщ...
pgsql – PostgreSQL
Laravel Pro
iOS Developers — русского...
ClickHouse не тормозит
Rust — русскоговорящее со...
JavaScript — русскоговоря...
С#
pro.cxx
pro.jvm
React Native — русскогово...
Devs Chat
Docker — русскоговорящее ...
HTML/CSS — русскоговоряще...
Python beginners
🐧 RU.UBUNTU — Официальное...
Kotlin Community
Embedded Group
Чат экстремального погром...
aiogram
Scala User Group
Haskell
PHP
TypeScript
Клуб Vue.js-разработчиков
Xamarin Developers (MAUI,...
F# Chat
![Svelte [svelt] - All abou...](https://image.telq.org/channel_avatar_1142273288_5399907573915831550_mini.jpeg){kind=avatar}
Svelte [svelt] - All abou...
Системное администрирован...
Nuxt.js | Vue SSR
var chat = new Chat();
Data Science Chat
Ассемблер
Android Architecture
Laravel для начинающих
Церковь метрик
Dart & Flutter
QA — русскоговорящее сооб...
Tarantool
pro.elixir
Python Flask
SAP ABAP
R (язык программирования)
learn.java
DevsHelper
Big Data Science :: AI / ...
Delphi & Lazarus
SwiftBook
Solidity Development
Evolution CMS официальное...
pro.net (former COM+)
OpenStreetMap RU
Visual Studio Code — русс...
ru_mysql
pro.lua
Dart / Flutter
GraphQL — русскоговорящее...
pro.Asm
IDE и редакторы — русског...
OpenCartForum - 🇺🇦🇪🇺Чат O...
Angular.js (1.x) — русско...
Frontend_ru
Lame C
Flutter Developers — русс...
AutoIT RU
AI / Искусственный Интелл...
dlang.ru
Laravel Framework Russian...
WebPwnChat
Чат — Верстка Сайтов и Фр...
pro.python
Java Underground
Natural Language Processi...
javascript_ru
SqlCom.ru - сообщество MS...
Cinema 4D
Delphi Community
pro.vim
Server Side Swift Develop...
Autohotkey_RU ( v1 & v2 )
PHP DevConf KZ🇰🇿
Modern::Perl
pro.rb (Ruby/Rails / RU)
RubyRush.ru
Oracle RU
ru.nim.talks
DevOps
Odoo talks & fun
Software Design/Architect...
sql_ninja
AndroidDev Pro:: Професси...
WordPress for developers
PowerShellRus - о Powersh...
Haskell Start
Эльбрусы и с чем их едят
Java/Kotlin and more
pro.buildsystems
Powershell Rus
ErlangRus
Python для анализа данных
Скрипты Гугл, Таблицы, Go...
WebGL ru
Compiler Development
firebase_ru — русскоговор...
Electron.js
phpclub.ru
RU.CRYPTOGRAPHY — Криптог...
pro.osdev - os developmen...
MySQL
Lame C++
QA juniors
GameDev for Web
Go Get A Job
PostgreSQL (English)
Ember_js
Tilda Developers
RU.Docker — Официальное Р...
Emacs — русскоговорящее с...
FreePascal & Lazarus
Язык программирования Jul...
WordPress – русскоговорящ...
Django
sentry_ru
ReasonML и OCaml
WebAssembly — русскоговор...
ansible — русскоговорящее...
Сrystal Lang — русскогово...
aiohttp
Clojure — русскоговорящее...
heroku_ru
PowerShell Pro
macOS Developers — русско...
systemd
use Perl or die;
FORTH и родственные ЯП
Natural Language Processi...
ru_jenkins
CatBoost
CyberBiology
Sequelize - community (en...
sonarqube_ru
Elm Lang сообщество разра...
SublimeText_RU
NativeScript
WordPress CodeRun
ReactiveX - русскоговорящ...
PureScript — русскоговоря...
#Вайти
Эликсир и Вунш
Cassandra
Font-Size: calc(14px + 21 * ((100vw - 320px) / (1200
- 320)));
Знакомая формула, прекрасно работает на медиа запросах.
Человек на Ютубе использует её в рамках ограничивающего контейнера и мистическим образом шрифт не ползет при 1200px и выше (важно)
Медиа запрос не используется, обнаглел до такой степени, что даже отступы отмеряет таким же образом.
Вот миксин;
$maxWidth: 1200;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
Используется как;
@include adaptiv-font (35, 14)
Т.е. 35px размер текста в рамках 1200 контейнера и до 14px вплоть до 320px ширины экрана.
Полная идентичность коду не дает результата, после 1200 шрифт неуклонно растет на 35px+ и до бесконечности по ширине экрана.
Не могу понять каким образом. Есть мысли?
17 ответов
Artem
Автор вопроса
Вопрос снимается. Решение спиз.... найдено; $maxWidth: 1920; $maxWidthContainer: 1170; @mixin adaptive-value ($property, $startSize, $minSize, $type) { $addSize: $startSize - $minSize; @if $type==1 { // Если меньше контейнера #{$property}: $startSize + px; @media (max-width: #{$maxWidthContainer + px}) { #{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px)/ #{$maxWidthContainer - 320})); } } @else if $type==2 { // Если больше контейнера #{$property}: $startSize + px; @media (max-width: #{$maxWidthContainer + px}) { #{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px)/ #{$maxWidth - 320})); } } @else { // Всегда #{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px)/ #{$maxWidth - 320})); } }
Вопрос снимается. Решение спиз.... найдено; $maxWi...
Бляха, и это ж потом поддерживать кому-то
Бляха, и это ж потом поддерживать кому-то
ну в основе лежат цсс шлюзы. думаю ты про них знаешь )
ну в основе лежат цсс шлюзы. думаю ты про них знае...
Блин, я так и не почитал :(
Блин, я так и не почитал :(
напомнить? )
напомнить? )
Если только тебе не сложно)
Если только тебе не сложно)
https://t.me/css_ru/435428
Artem
Автор вопроса
Бляха, и это ж потом поддерживать кому-то
Да что там поддерживать то, поставил ширину контейнера и погнал)
Да что там поддерживать то, поставил ширину контей...
В этом надо разобраться)
В этом надо разобраться)
есть в видео формате еще объяснение формул выше
есть в видео формате еще объяснение формул выше
Надеюсь, по статье разберусь, спасибо)
Artem
Автор вопроса
Надеюсь, по статье разберусь, спасибо)
Вот так конечный результат выглядит. Начиная от ширины контейнера размер ползет вниз до 320
Вот так конечный результат выглядит.
Начиная от ши...
а свойство первым аргументом влияет на результат как-то?
Artem
Автор вопроса
Вопрос снимается. Решение спиз.... найдено; $maxWi...
по этому коду не видно
Похожие вопросы
Обсуждают сегодня