กำหนดรูปแบบการแสดงผลด้วย CSS/SASS

• 29 ส.ค. 2563
• แอดมิน
• CSS JavaScript VS Code
• 2,881

สำหรับท่านที่ต้องการกำหนดรูปแบบการแสดงผลที่แตกต่างกันออกไปด้วย CSS/SASS

@media screen and (max-width: 1920px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 640px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 240px) {}

สร้างเทมเพลตสำหรับ Visual Studio Code (Visual Studio Code Snippets)

How to make snippets for vs code

• Preference > User Snippets > open css.js or scss.js

Depending on your plaform, your user snippets file is located here:

• Windows %APPDATA%\Code\User\snippets\(language).json
• Mac $HOME/Library/Application Support/Code/User/snippets/(language).json
• Linux $HOME/.config/Code/User/snippets/(language).json

{
    "CSS Media query packs": {
        "prefix": "media-query",
        "body": [
          "@media screen and (max-width: 1920px) {}",
          "",
          "@media screen and (max-width: 1600px) {}",
          "",
          "@media screen and (max-width: 1440px) {}",
          "",
          "@media screen and (max-width: 1366px) {}",
          "",
          "@media screen and (max-width: 1280px) {}",
          "",
          "@media screen and (max-width: 960px) {}",
          "",
          "@media screen and (max-width: 768px) {}",
          "",
          "@media screen and (max-width: 640px) {}",
          "",
          "@media screen and (max-width: 480px) {}",
          "",
          "@media screen and (max-width: 240px) {}",
          ""
        ],
        "description": "CSS Media query packs"
    }
}