Convert px to vw/vh. Viewport units. For responsive design. Assumes 1920x1080.
Tools you might need next
Convert pixels to rem. Custom base font size. For responsive typography.
Design ToolsConvert em to pixels. Custom base. For typography and layout.
Design ToolsConvert between px, pt, em, rem, %, vw. All font size units. For typography.
Design ToolsCalculate line-height from font size and multiplier. For typography and readability.
Design ToolsCalculate letter-spacing in em from px. For typography and design.
Design ToolsVisual aspect ratio calculator with width/height inputs, common presets (16:9, 4:3, 1:1), device presets (iPhone, MacBook, 4K), and CSS aspect-ratio output.
Design Tools@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}@include breakpoint(sm) {
/* your styles */
}
@include breakpoint(md) {
/* your styles */
}
@include breakpoint(lg) {
/* your styles */
}
@include breakpoint(xl) {
/* your styles */
}
@include breakpoint(2xl) {
/* your styles */
}// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
2xl: '1536px'
}
}
}
}