Code Snippets CSS For responsive - vscode

emet.css.json

/* responsive rules to add to the css.json file to enable fast responsive emet */

  "Large Screen":{
  "prefix": "responsiveRetina",
  "body": ["@media (min-width: 1281px){\r\r.$1{$2}\r\r}"],
  "description": "Responsive Desktop "
  },


 "Laptop":{
  "prefix": "reponsiveLaptop",
  "body": ["@media (min-width: 1025px) and (max-width: 1280px) {\r\r.$1{$2}\r\r}"],
  "description": "laptop 1025-1280px "
  },

  "Tablet Portrait":{
  "prefix": "responsiveTabletPortrait",
  "body": ["@media (min-width: 768px) and (max-width: 1024px){\r\r.$1{$2}\r\r}"],
  "description": "Tablets, Ipads (portrait)"
  },


  "Tablet Landscape":{
  "prefix": "reponsiveTabletLandscape",
  "body": ["@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){\r\r.$1{$2}\r\r}"],
  "description": "Tablets, Ipads (landscape)"
  },

  "Mobile Landscape":{
  "prefix": "responsiveMobileLandscape",
  "body": ["@media (min-width: 481px) and (max-width: 767px){\r\r.$1{$2}\r\r}"],
  "description": "Low Resolution Tablets, Mobiles (Landscape) 481px to 767px"
  },

   "Mobile Portrait":{
  "prefix": "responsiveMobilePortrait",
  "body": ["@media (min-width: 320px) and (max-width: 480px){\r\r.$1{$2}\r\r}"],
  "description": "Most of the Smartphones Mobiles (Portrait)320px to 479px"
  }