这是如何实现你想要的断点青菜什么(断点,上海社会科学院亭子包)。 我试过它在铬(并与网页开发工具模拟设备),它的工作原理。
// With third-party tool
// Breakpoint https://github.com/at-import/breakpoint
// You can find installation instructions here https://github.com/at-import/breakpoint/wiki/Installation
$mobile-landscape-breakpoint: 'only screen' 375px 667px, (-webkit-min-device-pixel-ratio 2), (orientation landscape);
body {
@include breakpoint($mobile-landscape-breakpoint) {
color: blue;
}
}
如果断点看起来太复杂了,您可以使用自己的代码实现此目的。 例如:
// With Variable
$mobileLandscape: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";
@media #{$mobileLandscape} {
body {
color: red;
}
}
// With Mixin
@mixin mq($breakpoint){
@if $breakpoint == "mobile-landscape"{
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
@content;
}
}
}
body{
@include mq("mobile-landscape"){
color: green;
}
}
不,不工作,使用断点不针对移动景观的第一个唯一的,它的目标是每个手机和平板电脑。 第二种解决方案不使用gulp-sass进行编译。 但是,当它使用媒体查询时,它工作正常,我只想使用此媒体查询的快捷方式,就是这样,所以我问如何使用断点来实现此快捷方式。 – Ruby
mixin解决方案似乎工作的方式,但我只是抓我的头,如何与断点? 必须离开。 – Ruby