Mari jadikan web responsif dengan hanya satu baris pemasangan? Saya sedang mencari penyumbang!-tutorial css-php.cn

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

Barbara Streisand

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

asal

430 orang telah melayarinya

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()
   ],
};

Salin selepas log masuk

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>

Salin selepas log masuk

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!