結合Susy at-breakpoint（）和設備方向媒體查詢

我對Susy和響應式設計比較陌生。我設法設置了我的網格並使用了at-breakpoint（），我通過在調整瀏覽器窗口大小的同時測試它，然後在實際的移動設備（手機和平板電腦）上測試它，。我在iPad上遇到問題，因爲在媒體查詢中需要額外的定位規則（方向：風景）。這裏有什麼解決方法，是否有辦法將它包含在斷點規則中，或者我必須爲這種情況組成一個單獨的媒體查詢？結合Susy at-breakpoint（）和設備方向媒體查詢

這是我的網格設置：

$total-columns: 4; 
$column-width: 60px; 
$gutter-width: 20px; 
$grid-padding: $gutter-width/2; 

// alternative layout breakpoints 

$tablet-small: 6; 
$tablet: 8; 
$computer: 12;

而且隨着側欄和頁面主體打交道時，首先，我展示他們作爲塊元素水平方向上填滿了整個頁面，並在斷點後我讓他們代表爲像這樣的列：

#sidebar { 
    @include at-breakpoint($computer) { 
     @include span-columns(3, $computer); 
    } 
} // sidebar 

#page-body { 
    @include at-breakpoint($computer) { 
     @include span-columns(9 omega, $computer); 
    } 
} // page-body

我應該如何修改代碼，使它保留斷點的變量，並添加方向規則？謝謝！

來源

2013-03-26 george.b

請告訴我$集裝箱式的值：變量（在_base.scss？）？流體？還是魔法？ – greyman 2013-03-26 08:48:57

你是否試圖在iPad上強制橫向？ susy的工作方式基本上都是關於屏幕或窗口的寬度，這樣用戶就可以根據自己的需要定位設備。或者，你是否只想讓ipad在橫向模式下查看全寬度塊樣式，而在縱向模式下是否需要列模式？ – greyman 2013-03-26 08:59:04

Sass允許您嵌套媒體查詢（使用「和」創建一個查詢）。所以你可以簡單地在斷點內嵌套方向，反之亦然。也就是說，我認爲你可能會用這樣的方式變得更好：https：//github.com/scottjehl/iOS-Orientationchange-Fix來解決方向更改錯誤。然後，您可以根據寬度更寬廣地保持佈局控件。 – 2013-03-26 17:23:48

如果您想要定位特定設備，我認爲最好指定寬度。

所以不是$computer: 12;也許做$computer: 48em 12;

一旦達到min-width: 48em;，它會改變佈局，成爲12列網格。

來源

2013-03-26 05:19:06 Zendy

對不起，但我有點失落。如果我給斷點添加一個寬度，我得到這個錯誤：（_functions.scss的第21行：（48em 12）不是'round'的數字） – 2013-03-26 05:31:54

我不確定你的行21上有什麼，但是如果你做'$ computer：48em 12'，你不能做'@include span-columns（9歐米茄，$電腦）;'。將它改爲'@include span-columns（9 omega，12）;'。這可能是你的錯誤信息的原因。 – Zendy 2013-03-26 05:46:15

這樣的事情應該工作：

$device-lrg-landscape: max-device-width 480px, orientation landscape 


@include breakpoint($device-lrg-landscape)

來源

2013-03-27 18:52:25

結合Susy at-breakpoint（）和設備方向媒體查詢

回答

相關問題