Câu hỏi được gắn thẻ «responsive-design»

Tôi đang thử nghiệm thanh điều hướng phản hồi Bootstrap và tôi có một trang web demo . Khi tôi thay đổi kích thước trình duyệt trên máy tính để bàn, tất cả đều hoạt động tốt, bao gồm thanh điều hướng trở thành menu có thể thu gọn với …

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

Tôi có đoạn mã sau đây sẽ thiết lập một thùng chứa có chiều cao thay đổi theo chiều rộng khi trình duyệt được định kích thước lại (để duy trì tỷ lệ khung hình vuông). HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { …

135 html  css  responsive-design  vertical-alignment 

IPhone 5 có màn hình dài hơn và nó không bắt được lượt xem trên trang web của tôi. Các truy vấn thiết kế đáp ứng mới cho iPhone 5 là gì và tôi có thể kết hợp với các truy vấn iPhone hiện có không? Truy vấn phương tiện …

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

Tôi cần tạo một trang đáp ứng bằng cách sử dụng bootstrap theo vị trí div ở giữa trang như trong bố cục được đề cập bên dưới.

132 css  twitter-bootstrap  responsive-design 

Tôi có một video YouTube được nhúng trên trang web của chúng tôi và khi tôi thu nhỏ màn hình thành kích thước máy tính bảng hoặc điện thoại, nó sẽ ngừng thu nhỏ ở chiều rộng khoảng 560px. Đây có phải là tiêu chuẩn cho các video YouTube hoặc …

125 youtube  responsive-design  embed 

Tôi có một trang web để kết hợp với nhau có tỷ lệ khung hình cố định xấp xỉ ngang 16:9, như video. Tôi muốn đặt nó ở giữa và mở rộng để lấp đầy chiều rộng có sẵn và chiều cao có sẵn, nhưng không bao giờ lớn hơn …

122 html  css  responsive-design  aspect-ratio 

Tôi có một trang web phải đáp ứng cho điện thoại di động. Tôi đã tạo nó bằng máy tính để bàn của mình. Khi tôi điều chỉnh cửa sổ trình duyệt, nó hoạt động hoàn hảo cho điện thoại di động nhưng khi tôi kiểm tra nó trên điện …

117 mobile  web  responsive-design 

Mục đích là để <svg>phần tử mở rộng đến kích thước của vùng chứa mẹ của nó, trong trường hợp này là a <div>, bất kể vùng chứa đó lớn hay nhỏ. Mật mã: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect …

112 css  html  svg  responsive-design 

Tôi cần thêm các tính năng thiết kế đáp ứng vào ứng dụng web của mình bằng Twitter Bootstrap. Tôi chỉ muốn hành vi đáp ứng, tôi không quan tâm đến kiểu chữ, các thành phần hoặc bất kỳ thứ nào khác có trong Bootstrap. Tôi đã có một phiên …

109 html  css  twitter-bootstrap  responsive-design 

Cho rằng Twitter Bootstrap được thiết kế để đáp ứng / thân thiện với thiết bị, tại sao nó không sử dụng kích thước phông chữ tương đối?

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

Điều này nghe có vẻ như một câu hỏi ngớ ngẩn. Nếu tôi sử dụng đoạn mã CSS này cho màn hình thông thường ( box-bg.png200px x 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } và nếu tôi sử dụng truy vấn phương tiện như thế này để nhắm …

102 css  responsive-design  media-queries 

Tôi có mã này: <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 

Tôi đang cố gắng tạo ra một hình dạng như trong hình bên dưới với một cạnh nghiêng chỉ ở một bên (ví dụ: cạnh dưới) trong khi các cạnh khác vẫn thẳng. Tôi đã thử sử dụng phương pháp đường viền (mã được đưa ra bên dưới) nhưng kích …

90 html  css  responsive-design  css-shapes 

ĐÃ CHỈNH SỬA: Có lẽ tôi nên hỏi bộ chọn nào thiết lập phần đệm bên khi màn hình được giảm chiều rộng xuống dưới 480px? Tôi đã duyệt bootstrap-responsiveness.css trong một thời gian để xác định vị trí này nhưng dường như không có gì ảnh hưởng đến điều …

89 css  twitter-bootstrap  responsive-design  media-queries 

Làm cách nào để chúng tôi sắp xếp các truy vấn phương tiện một cách chính xác để tránh chồng chéo? Ví dụ: nếu chúng ta xem xét mã: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport …

88 css  responsive-design  media-queries