Adaptive PX - a free set of CSS variables that introduces a new unit of measurement apx
Never before has
make
adaptive layout
been so easy!
A
Now with apx.css, it's enough to write styles
for only the desktop
and mobile versions.
P
At all intermediate screen resolutions, the website will be perfectly adjusted!
X
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
1
Scaling of OS
distorts the layout
distorts the layout
The layout can seriously
break if the visitor has system
font scaling enabled
break if the visitor has system
font scaling enabled
Font scaling is enabled by default
on laptops with small screens.
on laptops with small screens.
Using the APX approach,
the website will be displayed 1:1
at any level of system scaling!
the website will be displayed 1:1
at any level of system scaling!
2
Between media-query
breakpoints, the website
looks
«not in the best way»
breakpoints, the website
looks
«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.
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!
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.
apx (adaptive pixels),
and the values
will be the same as in pixels.
3
Adaptive design takes
a lot of time and effort
a lot of time and effort
Writing all breakpoints, updating
all margins
and font sizes, double-checking everything multiple times...
Does it sound familiar?
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!
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!
how the design
looks on different
screens, including Retina displays!
It is better to see once than
to hear a hundred times
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!
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.
from a desktop or laptop computer.
Also, the full version of the website
has significantly more information.
For SASS/SCSS
Recommended by the author!
If you're not using SASS yet,
give it a try, it's convenient
If you're not using SASS yet,
give it a try, it's convenient
For CSS
Desktop layout width:
px
Mobile layout width:
px
Is there a tablet version in the design?
Yes
No
How to use:
1
Download apx.css and connect it to
your project as a regular CSS file
2
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
3
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!
4
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
is based on VW units
APX is based on how many pixels occupy
the necessary width of the screen, and we
design
by specifying the dimensions in pixels according to the layout. Then the formula
displays
the layout on each screen width as it
was intended by the designer. It's that simple!
the necessary width of the screen, and we
design
by specifying the dimensions in pixels according to the layout. Then the formula
displays
the layout on each screen width as it
was intended by the designer. It's that simple!
Why is it simple
and convenient?
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.
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
become
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.
desktop and mobile. Using APX, the layout will
become
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
speech:
