«responsive-design» etiketlenmiş sorular

Ç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 

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 

En boy oranını varsaymadan iframe'i nasıl duyarlı hale getirebilirim? Örneğin, içeriğin oluşturulmadan önce bilinmeyen herhangi bir genişliği veya yüksekliği olabilir. Not: Javascript kullanabilirsiniz. Misal: <div id="iframe-container"> <iframe/> </div> Boyut Bu iframe-containeryüzden o zorlukla uygun içinde fazladan boşluk bırakmadan, diğer bir deyişle, kaydırma yapmadan gösterilebilir böylece içerik için yeterli alan, ancak …

14 javascript  html  css  iframe  responsive-design 

Kenar çubuğum / gezinme içeriğimi (Bootstrap kullanarak) varsayılan olarak masaüstünde gösterilecek (genişletilecek) ve mobilde varsayılan olarak kapatılan ve yalnızca mobil cihazlarda gösterilen simgeyi almaya çalışırken gerçek bir sorun yaşıyorum. Bunun işe yaramasını sağlayamıyorum. <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa …

9 javascript  html  css  bootstrap-4  responsive-design