CSS Media Query Generator


How to use this tool:

  • All of your CSS sizes you want to change must be in "vw" (viewport width).
  • In your CSS, do not use two "vw" sizes at the same line.
  • Before clicking the button, check if your browser screen size is at "100%" and your CSS looks like normal in your screen.
  • The field Reference means the quantity (in VW) it is going to be increased.
  • The field Screen size means the "quantity of screen" it is going to decrease in order to apply the responsivity.
  • In order to achieve a better performance, avoid using VW in your buttons, paddings, margins and borders.