Adaptive PX - a free set of CSS variables that introduces a new unit of measurement apx

Never before has
adaptive layout
been so easy!

Сравнение стандартного стиля с apx.css
Now with apx.css, it's enough
to write styles
for only the desktop
and mobile versions.
At all intermediate screen resolutions,
the website will be perfectly adjusted!
No need to retrain - you can write code
using your usual way of development,
just like before!
The stack doesn't matter: HTML+CSS, SCSS,
React, Vue, Angular,
whatever you prefer
Scroll down to learn more

Problems solved
by APX.css

Scaling of OS
distorts the layout
The layout can seriously
break if the visitor has system
font scaling enabled
Font scaling is enabled by default
on laptops with small screens.
Using the APX approach,
the website will be displayed 1:1
at any level of system scaling!
Between media-query
breakpoints, the website
«not in the best way»
It's hard to say that the website
looks exactly
as it was intended.
And to achieve full compliance,

you need to set too many breakpoints,
which is a thankless task.
Using the APX approach, the website
will always stretch
optimally and look
like the layout on ANY resolution!

Less effort, better result!
Just instead of pixels, you will use
apx (adaptive pixels),
and the values
will be the same as in pixels.
Adaptive design takes
a lot of time and effort
Writing all breakpoints, updating
all margins
and font sizes, double-checking everything multiple times...
Does it sound familiar?
Using the APX approach, you can
create only
desktop and mobile wrapping. And that's it minimal
for website look good! Just one breakpoint!
No more need to worry about
how the design
looks on different
screens, including Retina displays!
It is better to see once than
to hear a hundred times
Try changing the screen width or using
the system font size increase feature,
and see if this website still looks good!
This website was built using apx.css technology!

Set up and download APX.css

Download APX

You can visit this website
from a desktop or laptop computer.

Also, the full version of the website
has significantly more information.

Recommended by the author!
If you're not using SASS yet,
give it a try, it's convenient
Desktop layout width:

Mobile layout width:

Is there a tablet version in the design?


How to use:

Download apx.css and connect it
your project as a regular CSS file
In the desktop version
of the layout, specify the dimensions
of the margins, font, and everything else in pixels exactly
as in the layout, but instead of px use var(--apx-N)
where N is the value in pixels
Open the project in the browser
and reduce the screen width.

When the content becomes
so small that it's difficult to read,

it means you need to set a media-
query breakpoint at this width.

Note: in the max-width media-
query, don't use
the apx variable,
use the value in px!
When creating the mobile version, specify the sizes
in the same way as in the layout, but use a different variable, namely var(--apx-m-N) where N is the value in pixels

How does it work?
And why is it so?

The formula
is based on VW units
APX is based on how many pixels occupy
the necessary width of the screen, and we
by specifying the dimensions in pixels according to the layout. Then the formula
the layout on each screen width as it
was intended by the designer. It's that simple!
Why is it simple
and convenient?
Of course, you can use VW units without APX.
But then you would have to calculate
in a calculator
or "eyeball" how much space
the element takes each time.

With APX.css, it's simple enough to write

the same sizes as in pixels on the layout.
And in most cases, we only need two versions:
desktop and mobile. Using APX, the layout will
larger or smaller depending
on the screen width without distorting.

And you will only need to switch
to the mobile version at the width where the desktop version content looks too small.

AdaptivePX creator's

Andrey Rikky 9953 666 777
Hello! My name is Andrey Rikky, and
I am a full-stack developer from Russia.

I am glad to see you on my brainchild's
website! I hope APX will help you.
As a front-end developer, I struggled
so much with adapting websites

to different devices.

The main problem was displaying
the site on Retina displays
and distorting the layout when the visitor used system scaling (enlarging fonts)
I searched the internet thoroughly,
both Russian and English, but could not
find any
adequate solutions.

I racked my brain searching for a method that would permanently
solve these problems.

I tried many different solutions, some
didn't work, some worked
but not everywhere, and finally, I came up
with a universal solution that works

everywhere and always!

I am sharing it with you!
Why is it free?
There are no hidden fees,
it is genuinely free.

I have always admired
what programmers did for programmers, without expecting anything in return.

And I am happy that I can contribute something valuable to the developer community!
If you like APX.css and it has helped you, you can voluntarily
support me by sending any amount to my SBER bank account.

Also, please share this find
with your programmer friends,

let this method become popular
and help the world!