iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
自我挑戰組

30 天來點 Design System系列 第 28

Day 28 建立 RWD media query breakpoint

  • 分享至 

  • xImage
  •  

建立 RWD 的判斷斷點

const mediaXS = "@media only screen and (min-width: 360px)";
const mediaSM = "@media only screen and (min-width: 480px)";
const mediaMD = "@media only screen and (min-width: 768px)";
const mediaLG = "@media only screen and (min-width: 1024px)";
const mediaXL = "@media only screen and (min-width: 1280px)";

export default {
  mediaXS,
  mediaSM,
  mediaMD,
  mediaLG,
  mediaXL,
}
  • 這邊應該可以寫成 functio 組合

Usage

import styled from 'styled-jss';
import breakpoint from "../constant/breakpoint";

const FormGroup = styled("div")({
  display: "flex",
  flexDirection: "column",
  justifyContent: "flex-star",
  // 大螢幕時讀取
  [breakpoint.mediaLG]: {
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    boxSizing: "border-box",
  },
});

export default FormGroup;

上一篇
Day 27 建立 Switch
下一篇
Day 29 部署 package
系列文
30 天來點 Design System30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言