กำหนดรูปแบบการแสดงผลด้วย CSS/SASS
สำหรับท่านที่ต้องการกำหนดรูปแบบการแสดงผลที่แตกต่างกันออกไปด้วย 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"
}
}