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ść...
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...
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...
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...
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
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ć...
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...
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">...
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ę...
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) { /*...
Obecnie mam coś takiego: <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>...
Od wersji Bootstrap 3 nie ma już oddzielnych plików dla responsywnych i standardowych arkuszy stylów. Jak więc mogę łatwo usunąć responsywne funkcje?
Ściągnąłem przykład Twittera Bootstrap i stworzyłem z nim prosty projekt railsowy. Skopiowałem css w razie potrzeby i wyświetla się dobrze. Skopiowałem też js i wszystko działa świetnie na moim komputerze: reorganizuje stronę, gdy zmieniam rozmiar mojej przeglądarki. W przypadku korzystania z...
Za pomocą zapytań o media CSS można max-device-widthkierować reklamy na szerokość urządzenia (np. IPhone lub Android) i / lub na max-widthszerokość strony. Jeśli używasz max-device-width, kiedy zmienisz rozmiar okna przeglądarki na pulpicie, CSS się nie zmieni, ponieważ twój pulpit nie zmienia...
Byłoby dobrze opakować style css dla różnych rozdzielczości w ramach niektórych klas css, używając less. Chciałbym zrobić coś takiego: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } Na koniec powinno być coś takiego: footer {...
Ostatnio projektuję witryny, które są bardziej responsywne i często korzystam z zapytań o media CSS. Zauważyłem, że kolejność definiowania zapytań o media ma znaczenie. Nie testowałem tego w każdej przeglądarce, ale tylko w Chrome. Czy istnieje wytłumaczenie tego zachowania? Czasami jest to...
Jak sprawić, by iframe reagował bez zakładania współczynnika proporcji? Na przykład treść może mieć dowolną szerokość lub wysokość, która jest nieznana przed renderowaniem. Uwaga: możesz używać Javascript. Przykład: <div id="iframe-container"> <iframe/> </div> Zmień to...
Mam poważne problemy z uzyskaniem zawartości paska bocznego / nawigacji (za pomocą Bootstrap), aby domyślnie wyświetlać (być rozwijana) na komputerze i domyślnie zamykać na urządzeniach mobilnych, a ikona wyświetla się tylko na urządzeniach mobilnych. Nie mogę tego zrobić. <nav class="menu...