Home > Article > Web Front-end > Let’s make the web responsive with just one installation line? I’m looking for contributors!
Let’s make the web responsive with just one installation line? I’m looking for contributors!
- Barbara StreisandOriginal
- 2024-11-06 09:04:02410browse
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:
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()
],
};
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>
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!