Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
pxtorem-dpr
Advanced tools
Readme
A postcss plugin that calculates and generates adaptive css code, such as rem
and 0.5px borders for retina devices
.
[![NPM version][npm-image]][npm-url] [![Build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![Downloads][downloads-image]][downloads-url]
Set rem unit and hairline class. For example:
(function (win, doc) {
var docEl = doc.documentElement;
function setRemUnit () {
var docWidth = docEl.clientWidth;
var rem = docWidth / 10;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function () {
setRemUnit();
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit();
}
}, false);
setRemUnit();
if (win.devicePixelRatio && win.devicePixelRatio >= 2) {
var testEl = doc.createElement('div');
var fakeBody = doc.createElement('body');
testEl.style.border = '0.5px solid transparent';
fakeBody.appendChild(testEl);
docEl.appendChild(fakeBody);
if (testEl.offsetHeight === 1) {
docEl.classList.add('hairlines');
}
docEl.removeChild(fakeBody);
}
}) (window, document);
Or use amfe-flexible
The raw stylesheet only contains @2x style, and if you
rem
unit,add /*rem*/
after the declaration/*no*/
after the declarationpx
unit when autoRem
is set to true
, add /*px*/
after the declarationAttention: Dealing with SASS or LESS, only /*...*/
comment can be used, in order to have the comments persisted.
Before processing:
.selector {
height: 64px;
width: 150px; /*rem*/
padding: 10px; /*no*/
border-top: 1px solid #ddd;
}
After processing:
.selector {
height: 32px;
width: 2rem;
padding: 10px;
border-top: 1px solid #ddd;
}
.hairlines .selector {
border-top: 0.5px solid #ddd;
}
adaptive(config)
Config:
remUnit
: number, rem unit value (default: 75)
baseDpr
: number, base device pixel ratio (default: 2)
remPrecision
: number, rem value precision (default: 6)
hairlineSelector
: string, selector name of 1px border (default '.hairlines') Example: '[data-dpr="2"],[data-dpr="3"]'
autoRem
: boolean, whether to transform to rem unit (default: true)
propList
: array, The properties that can use transform (default: ['*'])
pxPropList
: array, The properties that can change from px to dpr (default: ['font*', 'border*', '!border-radius'])
selectorBlackList
: array, The selectors to ignore and leave as px. (default: [])
exclude
: array, The selectors to ignore file. (default: null)
MIT
FAQs
A CSS post-processor that converts px to rem.
The npm package pxtorem-dpr receives a total of 0 weekly downloads. As such, pxtorem-dpr popularity was classified as not popular.
We found that pxtorem-dpr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.