teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

sassで使用しているブレークポイントのメディアクエリーを追加しました。

2020/01/13 22:47

投稿

viivaaaa26
viivaaaa26

スコア2

title CHANGED
File without changes
body CHANGED
@@ -22,6 +22,24 @@
22
22
  </div>
23
23
  ```
24
24
  ```scss
25
+ $layout-width-inner: 1226px;//インナーの幅
26
+
27
+ // ブレークポイント
28
+ $breakpoints: (
29
+ "sp": "screen and (max-width: 767px)",
30
+ "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
31
+ "pc": "screen and (min-width: #{$layout-width-inner})",
32
+ );
33
+
34
+ // メディアクエリー
35
+ @mixin mq($breakpoint: sp) {
36
+
37
+ @media #{map-get($breakpoints, $breakpoint)} {
38
+
39
+ @content;
40
+ }
41
+ }
42
+
25
43
  #access {
26
44
  position: absolute;
27
45
  bottom:-100px;