cari

css之px自动转rem

Apr 04, 2017 pm 01:40 PM
cssrem

作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了。
但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时、费力的过程,有没有什么办法可以“解放”我们呢?(原谅我的懒~)

1.CSS处理器

Sass、LESS以及PostCSS这样的处理器都可以处理。

Sass(使用Sass的函数、混合宏这些功能来实现):
@function px2em($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1em;
}
Sass(使用Sass的混合宏):
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}

上面的方法,我们还得去额外学习sass这类的书写规则,也需要配置,虽然很简单,但是能不能更简单就更简单呢?

2.CSSREM

这是插件是flashlizi为sublime text编写的一个插件,用起来真的很方便!我们可以在GitHub上看到。

下面我介绍一下,如何配置:

2.1 我们可以在GitHub上下载所依赖的文件;
2.2 打开Sublime Text,进入packages目录(Sublime Text -> Preferences -> Browse Packages);
2.3 将cssrem-master文件夹放在上一步打开的目录中,重启sublime text即可生效;
我们也可以修改默认配置:
打开cssrem-master文件夹下的cssrem.sublime-settings文件,进行修改
{
    "px_to_rem": 40, //px转rem的单位比例,默认为40
    "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //启用此插件的文件类型。默认为:[".css", ".less", ".sass"]
}

实际测试:
新建一个.css文件:

css之px自动转rem

11.png


按tab键,得到如下结果:

css之px自动转rem

22.png


是不是很方便,快动手去尝试吧~

最后,附上 微网站—使用flexible.js实现移动端设备适配 。

Atas ialah kandungan terperinci css之px自动转rem. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Haunted: cangkuk untuk komponen webHaunted: cangkuk untuk komponen webApr 19, 2025 am 11:06 AM

Saya hanya berbual dengan Dave dan dia memberitahu saya tentang berhantu. Ia cangkuk, tetapi untuk komponen web asli! Cukup sejuk. Saya rasa kewujudan barangan seperti ini

Berita Platform Mingguan: Masa Acara, Google Earth untuk Web, Undead Sesi CookiesBerita Platform Mingguan: Masa Acara, Google Earth untuk Web, Undead Sesi CookiesApr 19, 2025 am 10:57 AM

Dalam berita minggu ini, Wikipedia membantu mengenal pasti tiga pengendali klik perlahan, Google Earth datang ke web, sifat SVG dalam CSS mendapatkan lebih banyak sokongan, dan apa yang perlu dilakukan sekiranya berlaku kue zombie.

Pemotongan pelbagai baris dengan CSS tulenPemotongan pelbagai baris dengan CSS tulenApr 19, 2025 am 10:50 AM

Caranya dalam artikel ini masih cukup kemas dan pandai, tetapi ada cara yang kini standard untuk melakukan ini yang mungkin pertaruhan terbaik anda.

Perpustakaan animasi CSSPerpustakaan animasi CSSApr 19, 2025 am 10:46 AM

Terdapat banyak perpustakaan yang ingin membantu anda menghidupkan perkara di web. Ini tidak benar -benar perpustakaan yang membantu anda dengan sintaks atau

Input Warna: Menyelam dalam ke dalam perbezaan silang penyemak imbasInput Warna: Menyelam dalam ke dalam perbezaan silang penyemak imbasApr 19, 2025 am 10:40 AM

Dalam artikel ini, kita akan melihat struktur di dalam elemen, ketidakkonsistenan pelayar, mengapa mereka melihat cara tertentu dalam penyemak imbas tertentu, dan bagaimana

Menyekat elemen (pseudo) ke kotak sempadan ibu bapa 'Menyekat elemen (pseudo) ke kotak sempadan ibu bapa 'Apr 19, 2025 am 10:39 AM

Pernahkah anda mahu memastikan bahawa tiada elemen (pseudo) yang dipaparkan di luar kotak sempadan ibu bapa ' s? Sekiranya anda mempunyai masalah untuk membayangkan apa

Roti bakarRoti bakarApr 19, 2025 am 10:30 AM

Suatu hari, tiba -tiba, saya mula mendengar jenaka tentang roti bakar. Saya tidak tahu apa konteksnya. Saya menganggap beberapa rakan baru mula menceritakan jenaka roti bakar,

Melindungi laluan Vue dengan pengawal navigasiMelindungi laluan Vue dengan pengawal navigasiApr 19, 2025 am 10:29 AM

Pengesahan adalah bahagian yang diperlukan dari setiap aplikasi web. Ini adalah cara yang berguna di mana kita dapat memperibadikan pengalaman dan memuatkan kandungan khusus untuk a

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.