Bootstrapを使わない案件ではたいてい2つで分けて制作する。
|
1 2 3 4 5 6 7 8 9 |
/* スマホ */ @media screen and (max-width:767px) { } /* PC*/ @media screen and (min-width:768px){ } |
BootStrap4には以下のようなMixinを使用してスニペットで呼び出している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//ブレイクポイントのmixin ※Bootstrap4版 $breakpoints: ( ‘xs’: ‘screen and (min-width: 576px)’, /* モバイル（576までの端末） */ ‘sm’: ‘screen and (max-width: 576px)’, /* モバイル（576以上の端末） */ ‘md’: ‘screen and (max-width: 768px)’, ‘lg’: ‘screen and (max-width: 992px)’, ‘xl’: ‘screen and (max-width: 1200px)’, ) !default; @mixin mq($breakpoint: md) { @media #{map-get($breakpoints, $breakpoint)} { @content; } } |
BootStrap3には以下のようなMixinを使用してスニペットで呼び出している。
|
1 2 3 4 5 6 7 |
ブレイクポイントのmixin ※Bootstrap3版 $breakpoints: ( ‘xs’: ‘screen and (max-width: 480px)’, ‘sm’: ‘screen and (max-width: 768px)’, ‘md’: ‘screen and (max-width: 991px)’, ‘lg’: ‘screen and (max-width: 1200px)’, ) !default; |
SASSでIEハックした際に更にレスポンシブのブレークポイントを加えたい場合は、以下のようにする。
多分やり方間違っているけど、色々ためしてこうなりました。
だれかいい方法あったら教えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media all and (-ms-high-contrast:none) { #hoge{ margin-top: -110px; /* モバイル（768までの端末） */ &::before{ top: 40px; } } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @include mq(sm){ #hoge { margin-top: 10px !important; } } } |