«responsive-design» 태그된 질문

반응 형 웹 디자인 (RWD)은 화면 크기, 플랫폼 및 방향에 따라 다양한 장치에서 최적의 경험을 제공하는 사이트를 만드는 것을 목표로하는 웹 디자인 및 개발에 대한 접근 방식입니다.

4
반응 형 웹 사이트가 모바일에서 전체 너비로 축소되었습니다.
Bootstrap responsiveness navbar를 테스트 중이며 데모 웹 사이트가 있습니다. 바탕 화면에서 브라우저의 크기를 조정하면 상단에 작은 아이콘이있는 축소 가능 메뉴가되는 탐색 모음을 포함하여 모두 잘 작동합니다. 클릭하면 더 많은 메뉴 버튼을 볼 수 있습니다. 그러나 모바일 브라우저에서 시도했을 때 (Android의 크롬 및 인터넷 브라우저에서 시도했지만) 반응 형 디자인을 보지 못했습니다. …
10
반응 형 높이로 div 내부의 이미지를 세로로 정렬
브라우저의 크기를 조정할 때 너비에 따라 높이가 변하는 컨테이너를 설정하는 다음 코드가 있습니다 (제곱 종횡비 유지). 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%; /* forces 1:1 aspect ratio */ } …
11
iPhone 5 CSS 미디어 쿼리
iPhone 5의 화면이 길어 웹 사이트의 모바일 화면을 보지 못했습니다. iPhone 5의 새로운 반응 형 디자인 쿼리는 무엇이며 기존 iPhone 쿼리와 결합 할 수 있습니까? 내 현재 미디어 쿼리는 다음과 같습니다. @media only screen and (max-device-width: 480px) {}
10
반응 형 너비로 YouTube 비디오 축소
웹 사이트에 YouTube 비디오가 포함되어 있으며 화면을 태블릿 또는 휴대폰 크기로 축소하면 너비가 약 560px에서 축소되지 않습니다. YouTube 동영상에 대한 표준인가요 아니면 코드를 더 작게 만들기 위해 추가 할 수있는 것이 있나요?
9
div의 종횡비를 유지하지만 CSS에서 화면 너비와 높이를 채우시겠습니까?
16:9동영상처럼 가로 세로 비율이 고정 된 사이트를 모아 놓았습니다 . 나는 그것을 중앙에 놓고 사용 가능한 너비와 사용 가능한 높이를 채우기 위해 확장하고 싶지만 양쪽에서 더 커지지 않도록합니다. 예를 들면 : 길고 얇은 페이지에는 비례 높이를 유지하면서 전체 너비로 콘텐츠가 늘어납니다. 짧은 폭의 페이지에는 비례하는 너비로 전체 높이로 콘텐츠가 늘어납니다. …
5
<svg> 요소를 부모 컨테이너로 확장하거나 축소하는 방법은 무엇입니까?
목표는 &lt;svg&gt;해당 컨테이너의 크기에 &lt;div&gt;관계없이 요소를 상위 컨테이너 (이 경우 a)의 크기로 확장하는 것입니다. 코드: &lt;style&gt; svg, #container{ height: 100%; width: 100%; } &lt;/style&gt; &lt;div id="container"&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" &gt; &lt;rect x="0" y="0" width="100" height="100" /&gt; &lt;/svg&gt; &lt;/div&gt; 이 문제에 대한 가장 일반적인 해결책 viewBox은 &lt;svg&gt;요소에 속성을 설정하는 것 같습니다 …
8
Bootstrap 3에서 반응 형 그리드를 얻는 방법은 무엇입니까?
Twitter Bootstrap을 사용하여 웹 애플리케이션에 반응 형 디자인 기능을 추가해야합니다. 나는 단지 반응 형 동작을 원하고 타이포그래피, 구성 요소 또는 부트 스트랩에 포함 된 다른 것들에 관심이 없습니다. 내가 가지고 사용자 정의 부트 스트랩 버전 바로 그리드 시스템을 선택합니다. 그러나 생성 된 CSS를 애플리케이션에 추가하면 모든 스타일 (헤더, 링크 및 …
3
Retina 디스플레이, 고해상도 배경 이미지
이것은 어리석은 질문처럼 들릴 수 있습니다. 일반 디스플레이에이 CSS 스 니펫을 사용하는 경우 ( box-bg.png200px x 200px) .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } 레티 나 디스플레이를 대상으로하기 위해 이와 같은 미디어 쿼리를 사용하는 경우 (@ 2x 이미지는 고해상도 버전 임) @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat …
4
소형 장치의 Twitter 부트 스트랩 숨기기 요소
이 코드가 있습니다. &lt;footer class="row"&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 1&lt;/li&gt; &lt;li&gt;Text 2&lt;/li&gt; &lt;li&gt;Text 3&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 4&lt;/li&gt; &lt;li&gt;Text 5&lt;/li&gt; &lt;li&gt;Text 6&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 7&lt;/li&gt; &lt;li&gt;Text 8&lt;/li&gt; &lt;li&gt;Text 9&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 10&lt;/li&gt; &lt;li&gt;Text 11&lt;/li&gt; &lt;li&gt;Text …
3
측면이 기울어 진 모양 (반응 형)
아래 이미지와 같이 한쪽 (예 : 아래쪽) 에만 기울어 진 가장자리 를 사용하고 다른 가장자리는 똑바로 유지 하는 모양을 만들려고합니다 . 테두리 방법 (코드는 아래에 나와 있음)을 사용해 보았지만 모양의 치수가 동적이므로이 방법을 사용할 수 없습니다. .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: …
12
부트 스트랩-화면 크기가 더 작을 때 패딩 또는 여백 제거
수정 됨 : 화면이 480px 이하로 줄어들 때 사이드 패딩을 설정하는 선택기를 물어봐야할까요? 나는 이것을 찾기 위해 한동안 bootstrap-responsiveness.css를 탐색했지만 이것에 영향을 미치는 것은 없습니다. 원본 기본적으로 작은 장치 화면에서 응답 성을 위해 설정된 기본 패딩 또는 여백을 제거하고 싶습니다. 나는 한 background color재정의 container-fluid선택하고 더 큰 화면들이 폭에 걸쳐 …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.