css - Masalah penyesuaian aplikasi WEB Desktop

Question

Rakan saya sedang membangunkan aplikasi GUI desktop menggunakan NW.js. Memandangkan halaman yang diperlukan oleh penuntut memerlukan banyak penyesuaian, sejumlah besar gambar yang disediakan digunakan sebagai latar belakang komponen DOM Saiz dan reka letak pada masa itu semuanya dikodkan dengan keras. Sekarang kita perlu menyesuaikan diri dengan desktop (ia tidak memerlukan menyesuaikan diri dengan telefon bimbit, hanya beberapa resolusi desktop), tetapi kerana banyak bahagian halaman dipaparkan dengan latar belakang (hanya tetapkan saiz elemen p dan kemudian tetapkan latar belakang image) , sukar untuk menukarnya kepada adaptif dengan cepat dan mudah saya ingin bertanya sama ada sesiapa mempunyai idea yang bagus?

Answer 1

Anda boleh menggunakan peratusan untuk lebar, vw (Lebar Port Pandangan) untuk ketinggian dan background-size: 100% 100%;.

untuk imej latar belakang.

Sebagai contoh, jika anda ingin melaksanakan segi empat sama responsif, anda mungkin boleh melakukan ini:

.square {
    width: 30%;
    height: 30vw;
    background: url("bg.png") no-repeat scroll center 0 transparent;
    background-size: 100% 100%;
}

Answer 2

Jika ini berlaku, bolehkah keseluruhan halaman dilaksanakan menggunakan transform:scale(multiple);? (Sudah tentu, ini memerlukan anda mempunyai hampir keseluruhan halaman sebagai latar belakang)

Answer 3

Bagi peratusan lebar, adakah anda telah cuba menggantikan lebar tetap dalam kelompok? Hanya pertimbangkan nisbah lebar bekas dan elemen di bawah beberapa resolusi tetap

Answer 4

Seperti @eechen di atas, jika anda menggunakan penyemak imbas teras krom, anda boleh menggunakan kaedah bersaiz latar belakang CSS3;