CSS

responsive css

/* Smartphones (portrait) */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape)  */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* Desktops and laptops  */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

responsive sizes css

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

responsive width CSS

/* Instead of using px measurements, use % when setting width or height.*/
/* The % is calculted from the width of the parent element.*/
#NonResponsiveWidth {
	width: 1080px;
    height: auto;
}
#responsiveWidth {
	width: 85%;
    height: auto;
}
/*For text, use vw (viewport-width) instead of px when setting font-width*/
#NonResponsiveText { font-size: 20px; }
#responsiveWidth { font-size: 10vw; }

CSS RESPONSIVE

div {
  font-size: min(3vw, 36px);
}