Apakah unit css px?

Dalam CSS, nama penuh px ialah piksel, yang bermaksud "piksel" dalam bahasa Cina Ia adalah unit panjang imej digital bagi sistem komputer, berbanding dengan resolusi paparan skrin . Resolusi monitor komputer biasa ialah 96DPI, yang bermaksud 1 piksel ialah "1/96" inci.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

px ialah singkatan piksel, yang merupakan unit piksel dan unit asas paparan imej. ditambah dengan perkataan Inggeris "elemen", ia menjadi Dapatkan piksel, jadi "piksel" bermaksud "elemen gambar", kadangkala juga dipanggil pel (elemen gambar).

px (piksel, piksel): Ia ialah unit panjang maya, iaitu unit panjang imej digital sistem komputer Jika px hendak ditukar kepada panjang fizikal, DPI ketepatan (Titik Per Inch,. piksel per inci) perlu dinyatakan , secara amnya terdapat pilihan DPI semasa mengimbas dan mencetak. Lalai untuk sistem Windows ialah 96dpi, dan lalai untuk sistem Apple ialah 72dpi.

Dalam CSS, px ialah unit panjang relatif, yang relatif kepada resolusi paparan skrin.

• Pada peranti yang sama, piksel fizikal yang diwakili oleh setiap piksel CSS boleh berubah (iaitu aspek kerelatifan pertama piksel CSS

  ).
• Di antara peranti yang berbeza, piksel fizikal yang diwakili oleh setiap piksel CSS boleh berubah (iaitu aspek kedua kerelatifan piksel CSS);

Peranti yang berbeza mempunyai unit imej asas yang berbeza . Sebagai contoh, pic dot monitor boleh dianggap sebagai piksel fizikal monitor. Padang titik bagi monitor LCD semasa biasanya antara 0.25mm dan 0.29mm. Titik dakwat pencetak juga boleh dianggap sebagai piksel fizikal pencetak 300DPI ialah 0.085mm, dan 600DPI ialah 0.042mm.

Perhatikan bahawa apa yang biasa kita panggil resolusi monitor sebenarnya merujuk kepada resolusi yang ditetapkan pada desktop, bukan resolusi fizikal monitor. Tetapi kini monitor LCD telah menjadi arus perdana Memandangkan prinsip paparan LCD berbeza daripada CRT, kesan paparan terbaik hanya apabila resolusi desktop konsisten dengan resolusi fizikal kami resolusi fizikal monitor Resolusi adalah sama.

Menurut definisi spesifikasi CSS, px dalam CSS ialah panjang relatif, yang relatif kepada resolusi peranti tontonan. Peranti tontonan ini biasanya monitor komputer. Resolusi monitor komputer biasa ialah 96DPI, iaitu, 1 piksel ialah 1/96 inci (sebenarnya, dengan mengandaikan bahawa resolusi monitor kami konsisten dengan resolusi fizikal, dan pic titik kristal cecair sebenarnya antara 0.25mm dan 0.29mm, Jadi ia tidak mungkin tepat 1/96 inci, tetapi hanya dekat).

Secara umumnya, px ialah piksel fizikal peranti yang sepadan Walau bagaimanapun, jika resolusi peranti output sangat berbeza daripada monitor komputer, akan ada masalah dengan kesan output. Sebagai contoh, resolusi output pencetak pada kertas adalah lebih tinggi daripada skrin komputer Jika piksel fizikal peranti digunakan secara langsung tanpa penskalaan, maka foto pada komputer yang dicetak oleh pencetak 600DPI akan menjadi kira-kira 6 kali. lebih kecil daripada apabila dilihat pada monitor.

Jadi CSS menetapkan bahawa dalam kes ini, penyemak imbas harus menskala dan melaraskan nilai piksel untuk mengekalkan pengalaman membaca yang konsisten secara umumnya. Maksudnya, panjang piksel tertentu mesti sentiasa kelihatan sama dalam saiz pada output peranti yang berbeza.

Bagaimana untuk memastikan ini? Penukaran terus mengikut saiz piksel fizikal peranti sememangnya satu cara, tetapi CSS mengambil lebih banyak pertimbangan. Ia mengesyorkan penukaran harus dilakukan mengikut "piksel rujukan" (piksel rujukan).

Saiz yang dilihat oleh mata bergantung pada sudut pandangan. Sudut pandangan bergantung pada saiz sebenar objek dan jaraknya dari mata. Objek bersaiz 1 meter persegi yang jauhnya 10 meter kelihatan hampir sama dengan objek bersaiz 10 sentimeter persegi 1 meter Ini adalah akal apabila dikatakan tidak dapat melihat gunung melalui daun.

Oleh itu, spesifikasi CSS menggunakan sudut tontonan untuk menentukan "piksel rujukan". 1 piksel rujukan ialah sudut tontonan 1 titik (iaitu 1/96 inci).

Sila ambil perhatian perbezaan ini - piksel rujukan yang ditakrifkan oleh spesifikasi CSS bukanlah 1/96 inci, tetapi sudut tontonan 1/96 inci pada panjang lengan. Secara amnya dipercayai bahawa purata panjang lengan manusia ialah 28 inci, jadi sudut pandangan boleh dikira sebagai 0.0213 darjah. (iaitu (1/96)in / (28in * 2 * PI / 360deg) )

Apabila kita menggunakan peranti yang berbeza untuk mengeluarkan, jarak biasa antara mata dan output peranti adalah berbeza. Sebagai contoh, monitor komputer biasanya berukuran panjang, manakala apabila membaca buku dan kertas (bersamaan dengan output peranti pencetak), ia biasanya lebih dekat. Apabila menonton TV, ia akan berada lebih jauh Sebagai contoh, cadangan umum ialah 2.5 hingga 3 kali panjang pepenjuru skrin TV - jika anda mempunyai TV berwarna 42', jaraknya hampir 3 meter. Kalau korang tengok wayang..tak tahulah sejauh mana, korang boleh ukur sendiri.

Jadi, 1 piksel rujukan:

ialah 0.26mm (iaitu 1/96 inci) untuk monitor komputer

ialah 0.20mm untuk pencetak laser (dengan mengandaikan bacaannya jarak biasanya 55cm, iaitu 21 inci);

Apabila menukar, untuk pencetak 300DPI (iaitu, setiap titik ialah 1/300 inci), 1px biasanya akan dibundarkan kepada 3 titik, iaitu kira-kira 0.25mm dan untuk pencetak 600DPI, ia mungkin dibundarkan kepada 5 titik, iaitu 0.21mm.

Ringkasnya, px ialah unit relatif dan sentiasa merupakan nilai anggaran pada peranti tertentu (prinsipnya adalah sedekat mungkin dengan piksel rujukan).

Walau bagaimanapun, jika anda memahami unit mutlak sebagai kawalan mutlak ke atas kesan keluaran, keadaannya agak berbeza. Setakat objek utama output halaman web - skrin komputer berkenaan, px boleh dianggap sebagai unit rujukan - konsisten dengan resolusi desktop Jika ia adalah skrin LCD, ia hampir selalu konsisten dengan resolusi fizikal Skrin LCD - iaitu Dikatakan bahawa 1px yang ditetapkan oleh pereka web ialah "1 titik pada monitor pengguna yang akhirnya melihat halaman web ini"! Sebaliknya, unit mutlak tersebut tidak mutlak sama sekali.

Oleh kerana unit mutlak seperti cm atau pt mesti ditukar kepada piksel apabila dipaparkan pada skrin, dan penukaran ini tidak berdasarkan panjang fizikal sebenar piksel (pelayar tidak perlu tahu, dan ia adalah mustahil untuk mengetahui Apakah panjang fizikal semasa 1px monitor ini), tetapi ia dikira mengikut DPI yang ditetapkan oleh desktop. Dalam erti kata lain, pereka web menentukan bahawa fon tertentu ialah 12pt (iaitu 1/6 inci atau 4.2mm Sebenarnya, apabila anda mengukur skrin, hampir mustahil untuk menjadi tepat 12pt, tetapi hanya 16px mendekati 12pt (). ditukar mengikut 96DPI) . Jika pic skrin anda ialah 0.29mm, ia sebenarnya 4.64mm atau 13.15pt. Jika anda menukar desktop kepada fon besar (120DPI), 12pt terakhir adalah bersamaan dengan 20px Mengikut pic titik 0.29mm, kesan akhir ialah 16.44pt.

Pada masa lalu, adalah disyorkan bahawa pereka web tidak menggunakan px Salah satu sebabnya ialah pengguna boleh melaraskan DPI desktop mengikut keperluan mereka sendiri, dengan itu mengawal panjang sebenar panjang mutlak (lidah twister).

Walau bagaimanapun, ini sebenarnya mencurigakan. Memandangkan panjang sebenar panjang mutlak boleh dilaraskan mengikut keperluan, tidak ada sebab mengapa panjang relatif seperti px tidak boleh dilaraskan mengikut keperluan. Sama seperti apabila foto sebenarnya dicetak, anda sudah tentu boleh menskalakannya mengikut keperluan, fon dan imej yang ditetapkan dalam px boleh diskalakan apabila sebenarnya dipaparkan - maka 1px yang ditentukan oleh pereka web tidak lagi sepadan dengan 1px desktop pengguna , sebaliknya ia mungkin sepadan dengan 1.2px atau 1.5px atau nilai lain.

Pada masa lalu, pilihan untuk melaraskan saiz fon dalam penyemak imbas hanya berkesan untuk panjang mutlak (bersamaan dengan melaraskan DPI dalam penyemak imbas) dan tidak berkesan untuk px Ini hanya boleh dikatakan sebagai reka bentuk masalah penyemak imbas yang lalu, bukan masalah px. Penyemak imbas kini menyokong penskalaan fon yang ditetapkan dalam px. Seperti Firefox, pengguna juga boleh memilih untuk menskalakan fon sahaja atau imej juga. Oleh itu, ia boleh dilaksanakan sepenuhnya untuk menggunakan semua px "reka bentuk tepat tahap piksel", dan ia juga merupakan kaedah reka bentuk yang saya fikir adalah munasabah. Lagipun, px dalam CSS bertujuan untuk memastikan pengalaman membaca yang konsisten. Sama ada ia adalah susun atur cecair atau susun atur tetap, dan sama ada ia boleh menyesuaikan diri dengan resolusi yang berbeza, itu topik lain, dan ia tidak berkaitan secara langsung sama ada untuk menggunakan px sebagai unit.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah unit css px?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!