Pertanyaan yang diberi tag «responsive-design»

Saya menguji navbar respons bootstrap dan saya memiliki situs web demo . Ketika saya mengubah ukuran browser di desktop, semuanya berfungsi dengan baik termasuk nav bar yang menjadi menu yang dapat dilipat dengan ikon kecil di bagian atas yang dapat saya klik untuk melihat lebih banyak tombol menu. Tetapi ketika …

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

Saya memiliki kode berikut yang menyiapkan wadah yang memiliki tinggi yang berubah dengan lebar saat browser diubah ukurannya (untuk mempertahankan rasio aspek persegi). 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%; …

137 html  css  responsive-design  vertical-alignment 

IPhone 5 memiliki layar yang lebih panjang dan tidak menangkap tampilan seluler situs web saya. Apa permintaan desain responsif baru untuk iPhone 5 dan dapatkah saya menggabungkan dengan permintaan iPhone yang ada? Permintaan media saya saat ini adalah ini: @media only screen and (max-device-width: 480px) {}

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

Saya perlu membuat halaman responsif menggunakan bootstrap dengan posisi div di tengah halaman seperti pada tata letak yang disebutkan di bawah ini.

132 css  twitter-bootstrap  responsive-design 

Saya memiliki video YouTube yang tertanam di situs web kami dan ketika saya mengecilkan layar ke ukuran tablet atau ponsel, ia berhenti menyusut sekitar 560px lebarnya. Apakah standar ini untuk video YouTube atau ada sesuatu yang dapat saya tambahkan ke kode untuk membuatnya lebih kecil?

125 youtube  responsive-design  embed 

Saya memiliki situs untuk digabungkan yang memiliki rasio aspek tetap kira-kira 16:9lanskap, seperti video. Saya ingin membuatnya terpusat dan berkembang untuk mengisi lebar yang tersedia, dan tinggi yang tersedia, tetapi tidak pernah tumbuh lebih besar di kedua sisi. Sebagai contoh: Halaman yang tinggi dan tipis akan memiliki konten yang membentang …

122 html  css  responsive-design  aspect-ratio 

Saya memiliki situs web yang harus responsif terhadap ponsel. Saya telah membuatnya menggunakan desktop saya. Ketika saya menyesuaikan jendela browser, ini berfungsi dengan sempurna untuk ponsel tetapi ketika saya memeriksanya di ponsel asli saya: Samsung Galaxy S2 itu tidak responsif terhadap tampilan seluler. Apa yang salah?

117 mobile  web  responsive-design 

Tujuannya adalah agar <svg>elemen diperluas ke ukuran wadah induknya, dalam hal ini a <div>, tidak peduli seberapa besar atau kecil wadah itu. Kode: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> Solusi paling umum untuk …

112 css  html  svg  responsive-design 

Saya perlu menambahkan fitur desain responsif ke aplikasi web saya menggunakan Twitter Bootstrap. Saya hanya ingin perilaku responsif, saya tidak tertarik dengan tipografi, komponen, atau hal lain yang termasuk dalam Bootstrap. Saya mendapat versi Bootstrap yang disesuaikan hanya dengan memilih sistem grid. Namun, ketika saya menambahkan CSS yang dihasilkan ke …

109 html  css  twitter-bootstrap  responsive-design 

Mengingat bahwa Twitter Bootstrap dirancang agar responsif / ramah perangkat, mengapa tidak menggunakan ukuran font relatif?

104 twitter-bootstrap  mobile  fonts  responsive-design  font-size 

Ini mungkin terdengar seperti pertanyaan konyol. Jika saya menggunakan potongan CSS ini untuk tampilan biasa (Dimana box-bg.png200px kali 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } dan jika saya menggunakan kueri media seperti ini untuk menargetkan tampilan retina (Dengan gambar @ 2x menjadi versi resolusi tinggi); @media (-webkit-min-device-pixel-ratio: 2), …

102 css  responsive-design  media-queries 

Saya mencoba membuat bentuk seperti pada gambar di bawah dengan tepi miring hanya pada satu sisi (misalnya, sisi bawah) sedangkan tepi lainnya tetap lurus. Saya mencoba menggunakan metode perbatasan (kode diberikan di bawah) tetapi dimensi bentuk saya dinamis dan karenanya saya tidak dapat menggunakan metode ini. .shape { position: relative; …

93 html  css  responsive-design  css-shapes 

Saya memiliki kode ini: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

Saat ini saya memiliki sesuatu seperti: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> Sekarang asumsikan bahwa, contentadalah kotak dengan tinggi yang berbeda, dengan semua lebar yang sama - bagaimana saya bisa menjaga "tata letak berbasis grid" …

91 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

DIEDIT: Mungkin saya harus bertanya pemilih mana yang mengatur padding samping ketika layar dikurangi menjadi di bawah lebar 480px? Saya telah menjelajahi bootstrap-responsiveness.css untuk sementara waktu untuk menemukan ini tetapi sepertinya tidak ada yang mempengaruhi ini. Asli Saya pada dasarnya ingin menghapus padding default atau set margin untuk responsivitas pada …

90 css  twitter-bootstrap  responsive-design  media-queries