Pytania otagowane jako responsive-design

Testuję pasek nawigacyjny responsywności Bootstrap i mam witrynę demonstracyjną . Kiedy zmieniam rozmiar przeglądarki na pulpicie, wszystko działa dobrze, w tym pasek nawigacyjny, który staje się rozwijanym menu z małą ikoną u góry, którą mogę kliknąć, aby zobaczyć więcej przycisków menu. Ale kiedy wypróbowałem to w przeglądarce mobilnej (wypróbowałem na …

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

Muszę utworzyć responsywną stronę za pomocą bootstrap, umieszczając element div na środku strony, jak w poniższym układzie.

139 css  twitter-bootstrap  responsive-design 

Mam następujący kod, który konfiguruje kontener, którego wysokość zmienia się wraz z szerokością, gdy przeglądarka jest zmieniana (aby zachować kwadratowy współczynnik proporcji). 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%; /* …

135 html  css  responsive-design  vertical-alignment 

IPhone 5 ma dłuższy ekran i nie łapie mobilnego widoku mojej witryny. Jakie są nowe responsywne zapytania projektowe dla iPhone'a 5 i czy mogę łączyć z istniejącymi zapytaniami dotyczącymi iPhone'a? Moje aktualne zapytanie o media jest takie: @media only screen and (max-device-width: 480px) {}

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

Mam wideo YouTube osadzone na naszej stronie internetowej i kiedy zmniejszam ekran do rozmiarów tabletu lub telefonu, przestaje on zmniejszać się przy szerokości około 560 pikseli. Czy to standard w przypadku filmów na YouTube, czy jest coś, co mogę dodać do kodu, aby go zmniejszyć?

125 youtube  responsive-design  embed 

Mam witrynę do złożenia, która ma stały współczynnik proporcji, w przybliżeniu 16:9poziomy, jak wideo. Chcę, aby był wyśrodkowany i rozszerzony, aby wypełnić dostępną szerokość i dostępną wysokość, ale nigdy nie powiększał się po obu stronach. Na przykład: Wysoka i cienka strona miałaby treść rozciągającą się na całą szerokość, zachowując proporcjonalną …

122 html  css  responsive-design  aspect-ratio 

Mam witrynę internetową, która musi być responsywna dla telefonów komórkowych. Stworzyłem go na moim pulpicie. Kiedy dostosowuję okna przeglądarki, działa idealnie na telefon komórkowy, ale kiedy sprawdzam to na moim prawdziwym telefonie komórkowym: Samsung Galaxy S2 nie reaguje na widok mobilny. Co może być nie tak?

117 mobile  web  responsive-design 

Celem jest <svg>rozwinięcie elementu do rozmiaru jego kontenera nadrzędnego, w tym przypadku a <div>, bez względu na to, jak duży lub mały może być ten kontener. Kod: <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> …

112 css  html  svg  responsive-design 

Muszę dodać funkcje projektowania responsywnego do mojej aplikacji internetowej za pomocą Twitter Bootstrap. Chcę tylko responsywnego zachowania, nie interesuje mnie typografia, komponenty ani żadne inne rzeczy zawarte w Bootstrap. Dostałem dostosowaną wersję Bootstrap po prostu wybierając system siatki. Jednak kiedy dodaję wygenerowany CSS do mojej aplikacji, wszystkie moje style są …

109 html  css  twitter-bootstrap  responsive-design 

Biorąc pod uwagę, że Twitter Bootstrap został zaprojektowany tak, aby był responsywny / przyjazny dla urządzeń, dlaczego nie używa względnych rozmiarów czcionek?

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

To może brzmieć jak głupie pytanie. Jeśli użyję tego fragmentu kodu CSS do zwykłych wyświetlaczy (gdzie box-bg.pngjest 200 na 200 pikseli); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } i jeśli użyję takiego zapytania o media, aby skierować reklamy na wyświetlacze siatkówki (z obrazem @ 2x jako wersją o wysokiej …

102 css  responsive-design  media-queries 

Próbuję utworzyć kształt jak na poniższym obrazku z ukośną krawędzią tylko z jednej strony (na przykład z dołu), podczas gdy pozostałe krawędzie pozostają proste. Próbowałem użyć metody granicznej (kod podano poniżej), ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody. .shape { position: relative; height: 100px; …

93 html  css  responsive-design  css-shapes 

Mam ten kod: <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> <li>Text …

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

EDYTOWANO: Może powinienem zapytać, który selektor ustawia dopełnienie boczne, gdy ekran jest zmniejszony do szerokości poniżej 480 pikseli? Przez jakiś czas przeglądałem bootstrap-responsiveness.css, aby to zlokalizować, ale wydaje się, że nic nie ma na to wpływu. Oryginał Zasadniczo chcę usunąć wszelkie domyślne wypełnienia lub marginesy ustawione dla responsywności na mniejszych …

89 css  twitter-bootstrap  responsive-design  media-queries 

Jak dokładnie rozdzielić zapytania o media, aby uniknąć nakładania się? Na przykład, jeśli weźmiemy pod uwagę kod: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Co …

89 css  responsive-design  media-queries