Pertanyaan yang diberi tag «media-queries»

Dalam JavaScript mode orientasi dapat dideteksi menggunakan: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Namun, apakah ada cara untuk mendeteksi orientasi menggunakan CSS saja? Misalnya. sesuatu seperti: @media only screen and (width > height) { ... }

159 browser  css  tablet  media-queries 

Saya mencoba menggunakan kueri media CSS3 untuk membuat kelas yang hanya muncul ketika lebarnya lebih besar dari 400px dan kurang dari 900px. Saya tahu ini mungkin sangat sederhana dan saya kehilangan sesuatu yang jelas, tetapi saya tidak bisa mengetahuinya. Yang saya temukan adalah kode di bawah ini, hargai bantuan apa …

141 css  media-queries 

Saya mencoba menggunakan variabel CSS dalam kueri media dan tidak berfungsi. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

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 

Apakah ada cara untuk mendapatkan lebar perangkat pengguna, sebagai lawan dari lebar area pandang, menggunakan javascript? Kueri media CSS menawarkan ini, seperti yang bisa saya katakan @media screen and (max-width:640px) { /* ... */ } dan @media screen and (max-device-width:960px) { /* ... */ } Ini berguna jika saya menargetkan …

128 javascript  css  media-queries 

Apa cara teraman, menggunakan kueri media, untuk membuat sesuatu terjadi saat tidak menggunakan perangkat layar sentuh? Jika tidak ada cara, apakah Anda menyarankan menggunakan solusi JavaScript seperti !window.Touchatau Modernizr?

122 css  touch  media-queries 

Saya mencoba menggabungkan penggunaan variabel Sass dengan kueri @media sebagai berikut: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width kemudian ditentukan di berbagai titik dalam pengukuran berbasis persentase lebar stylesheet untuk menghasilkan tata letak yang dapat disesuaikan. Ketika saya melakukan ini, variabel …

121 sass  media-queries 

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 

Untuk beberapa alasan mode emulasi perangkat tidak membaca kueri media saya. Ini berfungsi di situs lain termasuk situs saya sendiri yang saya buat dengan bootstrap, tetapi tidak berfungsi pada kueri media yang saya gunakan dari awal (mengklik tombol kueri media akan mengubah tombol menjadi biru tetapi tidak ada kueri media …

94 css  google-chrome  media-queries  developer-tools 

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 

Bagaimana kita membagi kueri media secara akurat untuk menghindari tumpang tindih? Misalnya, jika kita mempertimbangkan kode: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Apa yang …

90 css  responsive-design  media-queries 

Saya memiliki kelas item dan kelas "pengubah" yang ringkas: .item { ... } .item.compact { /* styles to make .item smaller */ } Ini bagus. Namun, saya ingin menambahkan @mediakueri yang memaksa .itemkelas menjadi ringkas saat layarnya cukup kecil. Pada pemikiran pertama, inilah yang saya coba lakukan: .item { ... …

88 css  sass  media-queries