«media-queries» etiketlenmiş sorular

JavaScript'te yönlendirme modu aşağıdakiler kullanılarak algılanabilir: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Ancak, yönlendirmeyi yalnızca CSS kullanarak tespit etmenin bir yolu var mı? Örneğin. gibi bir şey: @media only screen and (width > height) { ... }

159 browser  css  tablet  media-queries 

Ben sadece genişliği 400 piksel ve 900 piksel daha az olduğunda görünen bir sınıf yapmak için CSS3 medya sorguları kullanmaya çalışıyorum. Bunun muhtemelen son derece basit olduğunu ve bariz bir şeyi kaçırdığımı biliyorum, ama anlayamıyorum. Ne ile geldim aşağıdaki kod, herhangi bir yardım için teşekkür ederiz. @media (max-width:400px) and (min-width:900px) …

141 css  media-queries 

Medya sorgusunda CSS değişkenlerini kullanmaya çalışıyorum ve çalışmıyor. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

İPhone 5 daha uzun bir ekrana sahip ve web sitemin mobil görünümünü yakalamıyor. İPhone 5 için yeni duyarlı tasarım sorguları nelerdir ve mevcut iPhone sorgularıyla birleştirebilir miyim? Mevcut medya sorgum şudur: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

Görüntü alanı genişliğinin aksine, javascript kullanarak kullanıcıların cihaz genişliğini almanın bir yolu var mı? CSS medya sorguları, söyleyebileceğim gibi bunu sunuyor @media screen and (max-width:640px) { /* ... */ } ve @media screen and (max-device-width:960px) { /* ... */ } Akıllı telefonları yatay yönde hedefliyorsam bu kullanışlıdır. Örneğin, iOS'ta max-width:640pxbir …

129 javascript  css  media-queries 

Dokunmatik ekranlı bir cihazda değilken bir şeyi gerçekleştirmenin en güvenli yolu, medya sorgularını kullanmak nedir? Hiçbir şekilde yoksa, !window.Touchveya Modernizr gibi bir JavaScript çözümü kullanmanızı önerir misiniz ?

122 css  touch  media-queries 

Bir Sass değişkeninin kullanımını @media sorgularıyla aşağıdaki gibi birleştirmeye çalışıyorum: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width daha sonra değişken mizanpajlar oluşturmak için stil sayfası genişlik yüzdesine dayalı ölçümlerin çeşitli noktalarında tanımlanır. Bunu yaptığımda, değişken doğru bir şekilde tanınıyor gibi görünüyor, …

121 sass  media-queries 

Bu aptalca bir soru gibi gelebilir. Bu CSS parçacığını normal ekranlar için kullanırsam ( box-bg.png200 piksele 200 piksel nerede ); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } ve retina ekranları hedeflemek için bunun gibi bir ortam sorgusu kullanırsam (@ 2x görüntüsü yüksek çözünürlüklü sürümdür); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) …

102 css  responsive-design  media-queries 

Bazı nedenlerden dolayı, cihaz öykünme modu medya sorgularımı okumuyor. Önyükleme ile yaptığım kendi sitelerim de dahil olmak üzere diğer sitelerde çalışıyor, ancak sıfırdan kullandığım medya sorguları üzerinde çalışmıyor (medya sorguları düğmesine tıklamak düğmeyi maviye çeviriyor ancak hiçbir medya sorgusu görüntülenmiyor). Aşağıdaki dosyayı test edin. Bu Chrome'da bir hata mı yoksa …

94 css  google-chrome  media-queries  developer-tools 

DÜZENLENDİ: Belki de ekran 480 piksel genişliğin altına düşürüldüğünde hangi seçicinin yan dolguyu ayarladığını sormalıyım? Bunu bulmak için bir süredir bootstrap-responsiveness.css'ye göz atıyorum ama hiçbir şey bunu etkilemiyor gibi görünüyor. Orijinal Temel olarak, daha küçük cihaz ekranlarında yanıt verebilmek için herhangi bir varsayılan dolguyu veya kenar boşluğunu kaldırmak istiyorum. Ben …

90 css  twitter-bootstrap  responsive-design  media-queries 

Çakışmayı önlemek için medya sorgularını nasıl doğru bir şekilde aralıklandırırız? Örneğin, kodu ele alırsak: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Destekleyen tüm tarayıcılarda tam …

90 css  responsive-design  media-queries 

Bir öğe sınıfım ve kompakt bir "değiştirici" sınıfım var: .item { ... } .item.compact { /* styles to make .item smaller */ } Bu iyi. Bununla birlikte, ekran yeterince küçük olduğunda sınıfı kompakt olmaya @mediazorlayan bir sorgu eklemek istiyorum .item. İlk düşündüğümde, yapmaya çalıştığım şey buydu: .item { ... } …

88 css  sass  media-queries 

Bootstrap 3'ten bu yana, duyarlı ve standart stil sayfaları için artık ayrı dosyalar yok. Peki, duyarlı özellikleri nasıl kolayca kaldırabilirim?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

CSS medya sorgularıyla, max-device-widthbir cihaz genişliğini (iPhone veya Android cihazı gibi) ve / veya max-widthbir sayfa genişliğini hedefleyen bir cihazı hedeflemek için kullanabilirsiniz . Eğer kullanırsanız max-device-widthmasaüstü değişim boyutu değil, çünkü masaüstünüzde tarayıcı penceresinin boyutunu değiştirdiğinizde, CSS, değişmez. Eğer kullanırsanız max-widthmasaüstünüzde tarayıcı penceresinin boyutunu değiştirdiğinizde, bu tür dokunmatik dostu elemanları …

82 css  responsive-design  media-queries