evrone.com Open in urlscan Pro
146.185.136.200  Public Scan

Form analysis
1 forms found in the DOM

POST /blog/postcss-px-viewport

<form class="webform-client-form webform-client-form-23" autocomplete="on" enctype="multipart/form-data" action="/blog/postcss-px-viewport" method="post" id="webform-client-form-23" accept-charset="UTF-8">
  <div>
    <div class="form-item webform-component webform-component-textfield webform-component--name">
      <input required="required" placeholder="Full name" autocomplete="name" type="text" id="edit-submitted-name" name="submitted[name]" value="" size="60" maxlength="128" class="form-text required"> <label class="option"
        for="edit-submitted-name">Your name <span class="form-required" title="This field is required.">*</span></label>
    </div>
    <div class="form-item webform-component webform-component-email webform-component--email">
      <input required="required" class="email form-text form-email required" placeholder="Email" autocomplete="email" type="email" id="edit-submitted-email" name="submitted[email]" size="60"> <label class="option" for="edit-submitted-email">Your
        email address <span class="form-required" title="This field is required.">*</span></label>
    </div>
    <div class="form-item webform-component webform-component-select webform-component--budget">
      <select id="edit-submitted-budget" name="submitted[budget]" class="form-select">
        <option value="" selected="selected"> - None -</option>
        <option value="1">Up to 20,000 €</option>
        <option value="2">Up to 40,000 €</option>
        <option value="3">Up to 60,000 €</option>
        <option value="4">Up to 100,000 €</option>
        <option value="5">More than 100,000 €</option>
        <option value="6">Not defined</option>
      </select> <label class="option" for="edit-submitted-budget">Budget </label>
    </div>
    <div class="form-item webform-component webform-component-select webform-component--position">
      <select id="edit-submitted-position" name="submitted[position]" class="form-select">
        <option value="" selected="selected"> - None -</option>
        <option value="1">C-level Executive</option>
        <option value="2">Investor</option>
        <option value="3">Manager</option>
        <option value="4">Other</option>
      </select> <label class="option" for="edit-submitted-position">Position </label>
    </div>
    <div class="form-item webform-component webform-component-textfield webform-component--phone">
      <input placeholder="Phone" type="text" id="edit-submitted-phone" name="submitted[phone]" value="" size="60" maxlength="128" class="form-text"> <label class="option" for="edit-submitted-phone">Your phone number </label>
    </div>
    <div id="edit-submitted-attach-file-ajax-wrapper">
      <fieldset class="webform-component--attach_file attach_file form-wrapper" id="edit-submitted-attach-file">
        <legend><span class="fieldset-legend">Attach file</span></legend>
        <div class="fieldset-wrapper">
          <div class="form-item webform-component webform-component-multiple-file webform-component--attach-file--0 not_empty">
            <div class="file-widget form-managed-file clearfix">
              <div class="auto_upload">
                <div><input type="file" id="edit-submitted-attach-file-0-upload" name="files[submitted_attach_file_0]" size="22" class="form-file"
                    accept="image/jpeg, image/png, text/plain, text/rtf, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation">
                </div>Attach file
              </div><input type="submit" id="edit-submitted-attach-file-0-upload-button" name="submitted_attach_file_0_upload_button" value="Upload" class="form-submit ajax-processed"><input type="hidden" name="submitted[attach_file][0][_weight]"
                value="0">
              <input type="hidden" name="submitted[attach_file][0][fid]" value="0">
            </div> <label class="option up" for="edit-submitted-attach-file-0-upload">Add a new file </label>
            <div class="description">Files must be less than <strong>8 MB</strong>.<br>Allowed file types: <strong>jpg jpeg png txt rtf pdf doc docx ppt pptx</strong>.</div>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="form-item webform-component webform-component-textarea webform-component--message">
      <div class="form-textarea-wrapper"><textarea placeholder="Message" id="edit-submitted-message" name="submitted[message]" cols="60" rows="1" class="form-textarea"
          style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 50px;"></textarea></div> <label class="option" for="edit-submitted-message">Write your message here </label>
    </div>
    <input type="hidden" name="details[sid]">
    <input type="hidden" name="details[page_num]" value="1">
    <input type="hidden" name="details[page_count]" value="1">
    <input type="hidden" name="details[finished]" value="0">
    <input type="hidden" name="form_build_id" value="form-AlMzH_w0S80QtU7uPv2-zbspjccTnWjStOBTA2Lp9HE">
    <input type="hidden" name="form_id" value="webform_client_form_23">
    <input type="hidden" name="webform_ajax_wrapper_id" value="webform-ajax-wrapper-23">
    <div class="captcha"><input type="hidden" name="captcha_sid" value="12385852">
      <input type="hidden" name="captcha_token" value="06f92fa0fcb8ded1ab2fa49830017d7b">
      <input data-recaptcha-v3-action="hire" data-recaptcha-v3-sitekey="6LeWG-cUAAAAAFuYPNDt0iR2S10rWWzsbrxHJsfV" type="hidden" name="recaptcha_v3_token"
        value="03AFcWeA4efUKM5HE_K4Q7thx_e1SdZ9jvCqlwMc8wTzkys-wkTmLg9VA1hWwOaeolNVkkgcsJi7MkVlmmQ50QE9fz6GsESVWJplNh4oytxsUxiRW9OQkv8j_aAsEBpsqPBZxZMgb6nbFhKTKQa0NURqgShN3ekB_dQn4866Rwxuq0LcAICZ7jlPv8JFs-nWu6-cvvUeevbhqXnuaHy0DCpY5Qf1gws4aLs7GVooofe_58Jc8yMt8Hbl3x7G_g9xC9dWkJYKaOSqyTWFqrURcuTye74hrSEeSC_mIXmTxXeym57YDTzp7NNzNccqanDI8rbWURHby8vBkKz6rP3vwS3MtcddRWn0q5v9eRP1xxtzbz8aPHFTn2aCfdwFTZFmkrivU10k9w88XTYhZ1aUbCa2BJ4nUHI5vPKOZWRMIgCpIdmdTk4EENZVZRPWRmBbAZEiObpoB8cT3cP6tvMgoLdn0hqBU-RjXl7_akNup_K20KtRXYSfmQ5SMKBr3B3OcZhz0yWAQia9F6XYeaT39EAgGjKzgn9ci8d_XNEyo1jYiC1afuIlAomss"
        class="recaptcha-v3-processed">
      <input type="hidden" name="captcha_response" value="Google recaptcha v3">
      <input type="hidden" name="captcha_cacheable" value="1">
    </div>
    <div class="form-actions"><input class="webform-submit button-primary form-submit ajax-processed" type="submit" id="edit-submit" name="op" value="Send message"></div>
  </div>
</form>

Text Content

 * Services
   Can't find what you need?
   Contact us
   Web development
   Mobile development
   Design
   Frontend
   Backend
   DevOps
   QA
   Business solutions
   Branding
   Mobile design
   UI design
   Web design
   Product design
   Cross-platform apps
 * Technologies
   Can't find what you need?
   Contact us
   Ruby
   Python
   Go
   Vue.js
   React
   Rust
   Flutter
   Node.js
   Android
   React Native
   Elixir
   Java
   Haskell
   PHP
   iOS
   NEM
   ETH
   Cordova
   Hyperledger
   C# (c sharp)
   .NET
   Bitcoin
   Solidity
   Smart Contract
 * Industries
   Can't find what you need?
   Contact us
   Fintech
   EdTech
   eHealth
   Foodtech
   HR-tech
   Retail
   eCommerce
   Video streaming
   Startups
 * Solutions
   Can't find what you need?
   Contact us
   CRM
   ERP
   Media
   Marketplace
   Blockchain
   Machine Learning
   Artificial intelligence
 * Cases
 * About
   Can't find what you need?
   Contact us
   About Evrone
   Testimonials
   Company Blog
   Privacy Policy
   News & Events
   Terms of Use
   Careers
   Contact
 * Language
   Preferred language
   English
   Deutsch
   Español
   简体中文
 * Let’s talk

 * Menu
 * Let’s talk


Index / Blog / Scale all the things with postcss-px-to-viewport


INTRODUCING POSTCSS-PX-TO-VIEWPORT: OPEN-SOURCE SOFTWARE TO CREATE SCALABLE
INTERFACES ON ANY DISPLAY

postcss-px-to-viewport is a plug-in for PostCSS that converts px values
to viewport units (vw, vh, etc.)

April 2020
Share:
 * 
 * 
 * 
 * 


Table of contents:
 1. Installation
 2. Configuration
 3. Widely used across Asia

Most mobile and cross-platform web developers have encountered the problem
at some point: you need your web app to scale neatly to the device screen size,
regardless of which of the many thousands of devices there are out there,
but your units only have one design layout width, mainly mobile. Or perhaps
you need to create a per-device stylesheet for a truly scalable cross-platform
UI, and want to use a scaled version of an original to base it upon. In either
case, converting everything by hand is laborious and inconvenient.

Grappling with this problem in one of our projects, the Med.me app, our leading
frontend developer Dmitriy Karpunin came up with the idea of using
a post-processor to convert CSS values from one set of units to another,
and that’s how postcss-px-to-viewport, a plug-in for PostCSS that converts
px values to viewport units (vw, vh, etc.), was born.

For example, if you specify a notional horizontal resolution of 640 pixels
and you specify a horizontal distance of 32px, the plug-in will convert that
to 5vw in the output, because 32 pixels is 5% of the 640 pixel viewport width.

The plug-in also has plenty of options for customisation, to control exactly
which values to convert, and where, and based upon which notional resolution.


INSTALLATION

Installation is straightforward with npm:

$ npm install postcss-px-to-viewport --save-dev

or with yarn, if you prefer:

$ yarn add -D postcss-px-to-viewport


CONFIGURATION

To configure the plug-in, add a 'postcss-px-to-viewport' object to your
postcss.config.js as shown below:

module.exports = {
  plugins: {
    ...
    'postcss-px-to-viewport': {
       unitToConvert: 'px',
       viewportWidth: 320,
       unitPrecision: 5,
       propList: ['*'],
       viewportUnit: 'vw',
       fontViewportUnit: 'vw',
       selectorBlackList: [],
       minPixelValue: 1,
       mediaQuery: false,
       replace: true,
       exclude: [],
       landscape: false,
       landscapeUnit: 'vw',
       landscapeWidth: 568
 
    }
  }
}


The options listed above are shown with their default values, and any that
you don't wish to override can be omitted.

To use postcss-px-to-viewport with gulp-postcss, add a task to your gulpfile.js
along the lines of the below:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');
 
gulp.task('css', function () {
 
    var processors = [
        pxtoviewport({
            viewportWidth: 320,
            viewportUnit: 'vmin'
        })
    ];
 
    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});




WIDELY USED ACROSS ASIA

One day in Summer 2018, we discovered an active community had sprung up around
the plug-in in China — suddenly, the issues, pull requests, and forks came
flooding in.

Much of Asia, but China, in particular, suffers from an active proliferation
of devices that developers are tasked with supporting,
and postcss-px-to-viewport quickly became invaluable to many!

We quickly realised that it would be helpful if the plug-in came with
instructions in Chinese, not just English, and we were thrilled when a community
volunteer answered our call and contributed a Chinese-language Readme
for the project.

postcss-px-to-viewport
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from
pixel units. The best choice to create a scalable interface on different
displays by one design size.
JavaScript 2809 389

postcss-px-to-viewport is an excellent example of a utility that does one thing
and does it well, and we encourage others to open similar tools they may have
written. And, if you encounter any problem in the development of your project
and cannot find a ready-made solution, we are here to help you develop a plugin
or even a software that will solve your problem and possibly help thousands
of other developers.

Many developers are afraid to spread their knowledge via writing open-source,
but there is nothing to be afraid of! You just need a tool that solves
a specific problem, and the community will support and help. The development
philosophy is based on mutual assistance and a desire to help each other; this
is the real meaning of open-source.
Dmitriy Karpunin
Chief Frontend, Evrone.com
Tags: 
Mobile design
iOS
Android
Flutter
Cordova
React Native
Cross-platform apps
Let’s talk about you
+49 176 24514399
Kemperplatz 1, 10785 Berlin
mail@evrone.com
Your name *
Your email address *
- None -Up to 20,000 €Up to 40,000 €Up to 60,000 €Up to 100,000 €More than
100,000 €Not defined Budget
- None -C-level ExecutiveInvestorManagerOther Position
Your phone number
Attach file

Attach file
Add a new file
Files must be less than 8 MB.
Allowed file types: jpg jpeg png txt rtf pdf doc docx ppt pptx.

Write your message here


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of
Service apply.
Services
Web development
Mobile App Development
User experience & design
Frontend
DevOps
QA
Solutions
CRM
ERP
Web Portal
Artificial intelligence
Machine Learning
Blockchain solutions
Industries
FinTech
EdTech
eHealth
Foodtech
Retail
HR-tech
Technologies
Ruby
Python
Golang
Vue.JS
React
Rust
Company
About
Contact
Cases
News
Blog
Jobs
Legal
Privacy Policy
Terms of Service
 
 
 
© Evrone


We use cookies to enhance your experience and analyze site usage.

Privacy Policy.
Decline Accept