«responsive-design» etiketlenmiş sorular

Duyarlı Web Tasarımı (RWD), ekran boyutuna, platforma ve yönlendirmeye dayalı olarak çok çeşitli cihazlarda en iyi deneyimleri sağlamak için siteler oluşturmayı amaçlayan bir Web tasarımı ve geliştirme yaklaşımıdır.

4
Duyarlı web sitesi, mobil cihazda tam genişliğe kadar uzaklaştır
Bootstrap yanıt hızı navbar'ı test ediyorum ve bir demo web sitem var. Tarayıcıyı masaüstünde yeniden boyutlandırdığımda, daha fazla menü düğmesi görmek için tıklayabileceğim üstte küçük bir simgeyle katlanabilir menü haline gelen gezinme çubuğu da dahil olmak üzere her şey iyi çalışıyor. Ancak bir mobil tarayıcıdan denediğimde (Android'de krom ve internet …
10
Div içindeki bir görüntüyü duyarlı yükseklikle dikey olarak hizalayın
Tarayıcı yeniden boyutlandırıldığında (kare en boy oranını korumak için) genişliği ile değişen bir yüksekliğe sahip bir kapsayıcı kurar aşağıdaki kodu var. HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces …
11
iPhone 5 CSS medya sorgusu
İ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) {}
9
En boy oranı korunsun ancak CSS'de ekran genişliği ve yüksekliği doldurulsun mu?
16:9Video gibi yaklaşık yatay sabit en boy oranına sahip bir sitem var . Mevcut genişliği ve mevcut yüksekliği doldurmak için ortalanmasını ve genişletilmesini istiyorum, ancak her iki tarafta da asla büyümemesini istiyorum. Örneğin: Uzun ve ince bir sayfa, orantılı bir yüksekliği korurken tam genişliğe kadar uzanan içeriğe sahip olacaktır. Kısa …
5
Bir <svg> elemanının üst kapsayıcısına genişletilmesi veya daralması nasıl sağlanır?
Amaç, &lt;svg&gt;bu kap &lt;div&gt;ne kadar büyük veya küçük olursa olsun , elemanın üst kapsayıcısının boyutuna genişlemesini sağlamaktır, bu durumda a . Kod: &lt;style&gt; svg, #container{ height: 100%; width: 100%; } &lt;/style&gt; &lt;div id="container"&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" &gt; &lt;rect x="0" y="0" width="100" height="100" /&gt; &lt;/svg&gt; &lt;/div&gt; Bu problemin en yaygın çözümü, …
8
Bootstrap 3'ten yalnızca duyarlı ızgara nasıl elde edilir?
Twitter Bootstrap kullanarak web uygulamama duyarlı tasarım özellikleri eklemem gerekiyor. Sadece duyarlı davranışı istiyorum, tipografi, bileşenler veya Bootstrap'te yer alan diğer şeylerle ilgilenmiyorum. Sadece grid sistemini seçen özelleştirilmiş bir Bootstrap sürümüne sahibim . Ancak, oluşturulan CSS'yi uygulamama eklediğimde, tüm stillerim karışıyor (başlık, bağlantılar ve diğerleri). Bu neden oluyor? Sadece grid …
3
Retina ekranlar, yüksek çözünürlüklü arka plan resimleri
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) …
3
Eğimli bir tarafla şekil verin (duyarlı)
Aşağıdaki resimdeki gibi sadece bir tarafta (örneğin alt tarafta) eğimli kenar diğer kenarlar düz kalırken bir şekil oluşturmaya çalışıyorum . Border yöntemini kullanmayı denedim (kod aşağıda verilmiştir) ancak şeklimin boyutları dinamik ve bu nedenle bu yöntemi kullanamıyorum. .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { …
4
Küçük cihazlarda Twitter bootstrap gizleme öğesi
Bu koda sahibim: &lt;footer class="row"&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 1&lt;/li&gt; &lt;li&gt;Text 2&lt;/li&gt; &lt;li&gt;Text 3&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 4&lt;/li&gt; &lt;li&gt;Text 5&lt;/li&gt; &lt;li&gt;Text 6&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 7&lt;/li&gt; &lt;li&gt;Text 8&lt;/li&gt; &lt;li&gt;Text 9&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 10&lt;/li&gt; &lt;li&gt;Text 11&lt;/li&gt; &lt;li&gt;Text …
3
Farklı yükseklikteki sütunlara sahip önyükleme satırı
Şu anda şöyle bir şeye sahibim: &lt;div class="row"&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;/div&gt; Şimdi varsayalım ki, contenthepsi aynı genişliğe sahip farklı yükseklikteki kutulardı - aynı "ızgara tabanlı düzeni" nasıl koruyabilirim ve yine de tüm kutuları mükemmel …
12
Bootstrap - Ekran boyutu daha küçük olduğunda dolguyu veya kenar boşluğunu kaldırma
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 …
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.