Conversion between Rem value and Px in CSS3:
bootstrap default html{font-size: 10px;}
rem is a relative size value, which is relative to the root element ,
For example, suppose we set the font size value of html to html{font-size : 87.5%;} (that is, 14px).
Related recommendations: "Bootstrap Getting Started Tutorial"
Then other fonts are the values obtained by dividing the value you want by 14;
For example The default twentytwelve theme size is 960px; converted to rem, it is 960/14=68.57142857142857rem; 24px of
padding is 24/14=1.714285714285714rem, and so on.
The 14 above is a variable. Compared with your setting of the font size of the root element HTML, if you set it to 62.5%, the divisor becomes 10. The comparison table is as shown on the right:
I don’t know what the benefits of using this rem unit are, but if you choose 62.5% as the font size of the root element, then the conversion between px and rem is to directly divide px by 10 to get rem, which is better than em It's much simpler. I still haven't figured out how to convert between em and px.
In addition, rem is not supported by other browsers except ie8 and below. If you want to consider ie8 and below, you can set a px and then set a rem like the twentytwelve default file.
The above is the detailed content of How to automatically convert px to rem in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

The article discusses strategies for staying updated with Bootstrap releases, accessing official documentation, best practices for integration, and community resources for discussion.

Article discusses customizing Bootstrap's appearance and behavior using CSS variables, Sass, custom CSS, JavaScript, and component modifications. It also covers best practices for modifying styles and ensuring responsiveness across devices.

Article discusses key Bootstrap components: grid system, typography, components, and utilities. Focuses on enhancing responsive design and interactive UI creation.

The article discusses methods to override Bootstrap's styles using custom CSS, focusing on creating separate files, using specificity, and best practices for organization.

Article discusses using Bootstrap's grid system for responsive layouts across devices, detailing structure, customization, and testing tools.

The article discusses sources for Bootstrap templates and themes, both free and premium. It covers customization and lists reputable sites for downloads.

This article examines the effectiveness of using inline-block for centering images within Bootstrap. It argues that while technically feasible, this method is impractical due to complexities in achieving responsive vertical centering and maintenance

The article outlines ways to contribute to Bootstrap, including code submissions, documentation improvements, bug reporting, and community engagement. It provides detailed steps for submitting pull requests and reporting issues.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version
Recommended: Win version, supports code prompts!

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
