Rumah > Artikel > hujung hadapan web > Mari jadikan web responsif dengan hanya satu baris pemasangan? Saya sedang mencari penyumbang!

Mari jadikan web responsif dengan hanya satu baris pemasangan? Saya sedang mencari penyumbang!

Barbara Streisandasal: 2024-11-06 09:04:02410semak imbas

Baru-baru ini saya menerbitkan pakej NPM dengan misi yang diterangkan dalam tajuk: untuk menjadikan projek responsif dengan hanya satu baris kod!

Saya berkongsi dengan anda pakej [beta] apl responsif

Saya mengambil masa beberapa tahun untuk mencuba dan membangunkan teknik ini, yang pada masa ini terdiri daripada:

Menetapkan saiz fon teg HTML secara dinamik (melalui skrip JS), dengan mengambil kira: (1) peleraian skrin dan (2) saiz fon penyemak imbas (untuk kebolehcapaian web)
Praproses takrifan piksel menjadi rem
Memusatkan elemen dalam skrin mudah alih (ciri percubaan)

Hasilnya ialah semua perkadaran elemen dan saiz relatif sama merentas semua resolusi skrin:

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

Dengan hanya satu pemasangan talian, contohnya menggunakan Rollup:

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

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

Atau meletakkan versi gabungan penyemak imbas ke dalam halaman:

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

Matlamat utama di sini ialah menjimatkan masa semasa membuat projek baharu dengan tidak perlu berurusan dengan responsif sama sekali, hanya percaya bahawa antara muka akan kelihatan baik pada semua resolusi skrin. Bunyinya bagus, kan?

Jadi, selepas melancarkan versi beta ini, saya sedang mencari sokongan dan penyumbang. Pada mulanya, ideanya adalah untuk menguji pakej ini dalam konteks, projek dan rangka kerja yang berbeza (React, Angular, Vue…) untuk menjadikan proses itu selengkap mungkin.

Siapa yang bersedia untuk cabaran ini? Langkah-langkah ujian ialah:

Pasang atau tambahkan teg skrip ke dalam apl baharu atau sedia ada anda 1.1 Jika anda mempunyai peraturan responsif sedia ada, pintaskannya
Semak antara muka anda merentas berbilang resolusi
Beri tahu saya cara ia berfungsi untuk anda :)

Atas ialah kandungan terperinci Mari jadikan web responsif dengan hanya satu baris pemasangan? Saya sedang mencari penyumbang!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html npm angular if for using Interface JS this idea

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Menukar Warna Butang pada Hover: Apa Yang Salah dan Bagaimana untuk Membetulkannya?Artikel seterusnya：Cara Menukar Warna Butang pada Hover: Apa Yang Salah dan Bagaimana untuk Membetulkannya?

Artikel berkaitan

Lihat lagi