Let's make the web responsive with just one installation line? I'm looking for contributors!-CSS Tutorial-php.cn

Let's make the web responsive with just one installation line? I'm looking for contributors!

Barbara Streisand

Release： 2024-11-06 09:04:02

Original

431 people have browsed it

Recently I published a NPM package with the mission described in the title: to make projects responsive with just one line of code!

I share with you the responsive-app [beta] package

It took me a few years experimenting and developing this technique, which currently consists on:

Setting the HTML tag font-size dynamically (through a JS script), taking in consideration: (1) the screen resolution and (2) the browser font-size (for web acessibility)
Pre-process pixel definitions into rem
Centralize elements in mobile screens (experimental feature)

The result is all element proportions and relative sizes as the same across all screen resolutions:

Let’s make the web responsive with just one installation line? I’m looking for contributors!

With just one line installation, for example using Rollup:

import responsive from 'rollup-plugin-responsive-app'

export default {
   …
   plugins: [
   …,
   // Last plugin on the list
   responsive()
   ],
};

Copy after login

Or placing the browser bundled version into the page:

<head>
    <script src="https://cdn.jsdelivr.net/npm/responsive-app@1.0.7-beta.0/dist/browser-bundle.min.js"></script>
</head>

Copy after login

The main goal here is saving time when creating a new project by not having to deal with the responsiveness at all, just trusting that the interface will look good on all screen resolutions. Sounds great, right?

So, after launching this beta version, I’m looking for support and contributors. Initially, the idea is to test this package in different contexts, projects, and frameworks (React, Angular, Vue…) to make the process as comprehensive as possible.

Who’s up for this challenge? Test steps are:

Install or add the script tag into your fresh or existing app 1.1 If you have existing responsive rules, bypass them
Check your interface across multiple resolutions
Let me know how it worked for you :)

The above is the detailed content of Let's make the web responsive with just one installation line? I'm looking for contributors!. For more information, please follow other related articles on the PHP Chinese website!