«media-queries» 태그된 질문

JavaScript에서는 다음을 사용하여 방향 모드를 감지 할 수 있습니다. if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } 그러나 CSS 만 사용하여 방향을 감지하는 방법이 있습니까? 예 : 같은 : @media only screen and (width > height) { ... }

159 browser  css  tablet  media-queries 

너비가 400px보다 크고 900px보다 작은 경우에만 나타나는 클래스를 만들기 위해 CSS3 미디어 쿼리를 사용하려고합니다. 나는 이것이 매우 간단하고 명백한 것을 놓치고 있지만 알아낼 수는 없다는 것을 알고 있습니다. 내가 생각해 낸 것은 아래 코드이며 도움을 주셔서 감사합니다. @media (max-width:400px) and (min-width:900px) { .class { display: none; } }

141 css  media-queries 

미디어 쿼리에서 CSS 변수를 사용하려고하는데 작동하지 않습니다. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

iPhone 5의 화면이 길어 웹 사이트의 모바일 화면을 보지 못했습니다. iPhone 5의 새로운 반응 형 디자인 쿼리는 무엇이며 기존 iPhone 쿼리와 결합 할 수 있습니까? 내 현재 미디어 쿼리는 다음과 같습니다. @media only screen and (max-device-width: 480px) {}

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

자바 스크립트를 사용하여 뷰포트 너비와 달리 사용자 장치 너비를 얻는 방법이 있습니까? CSS 미디어 쿼리는 이것을 제공합니다. @media screen and (max-width:640px) { /* ... */ } 과 @media screen and (max-device-width:960px) { /* ... */ } 가로 방향으로 스마트 폰을 타겟팅 할 때 유용합니다. 예를 들어 iOS에서 max-width:640pxwill 선언은 iPhone …

128 javascript  css  media-queries 

미디어 쿼리를 사용하여 터치 스크린 장치가 아닐 때 작업을 수행하는 가장 안전한 방법은 무엇입니까? 방법이 없다면 !window.Touch또는 Modernizr 와 같은 JavaScript 솔루션을 사용하는 것이 좋습니까?

122 css  touch  media-queries 

다음과 같이 Sass 변수를 @media 쿼리와 결합하려고합니다. $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width 그런 다음 스타일 시트 너비 백분율 기반 측정의 다양한 지점에서 정의되어 유동적 인 레이아웃을 생성합니다. 이렇게하면 변수가 제대로 인식되는 것 같지만 미디어 쿼리 조건은 그렇지 않습니다. 예를 …

120 sass  media-queries 

이것은 어리석은 질문처럼 들릴 수 있습니다. 일반 디스플레이에이 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 …

102 css  responsive-design  media-queries 

어떤 이유로 장치 에뮬레이션 모드가 내 미디어 쿼리를 읽지 않습니다. 부트 스트랩으로 만든 내 사이트를 포함한 다른 사이트에서는 작동하지만 처음부터 사용중인 미디어 쿼리에서는 작동하지 않습니다 (미디어 쿼리 버튼을 클릭하면 버튼이 파란색으로 바뀌지 만 미디어 쿼리는 표시되지 않음). 아래 테스트 파일. 이것은 Chrome의 버그입니까, 아니면 파일에서 변경해야 할 사항이 있습니까? <!DOCTYPE …

94 css  google-chrome  media-queries  developer-tools 

수정 됨 : 화면이 480px 이하로 줄어들 때 사이드 패딩을 설정하는 선택기를 물어봐야할까요? 나는 이것을 찾기 위해 한동안 bootstrap-responsiveness.css를 탐색했지만 이것에 영향을 미치는 것은 없습니다. 원본 기본적으로 작은 장치 화면에서 응답 성을 위해 설정된 기본 패딩 또는 여백을 제거하고 싶습니다. 나는 한 background color재정의 container-fluid선택하고 더 큰 화면들이 폭에 걸쳐 …

89 css  twitter-bootstrap  responsive-design  media-queries 

겹침을 피하기 위해 미디어 쿼리의 간격을 어떻게 정확하게 지정합니까? 예를 들어 코드를 고려하면 다음과 같습니다. @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } 정확히 20em 및 …

88 css  responsive-design  media-queries 

항목 클래스와 컴팩트 "수정 자"클래스가 있습니다. .item { ... } .item.compact { /* styles to make .item smaller */ } 이건 괜찮아. 그러나 화면이 충분히 작을 때 클래스를 압축하도록 하는 @media쿼리 를 추가하고 싶습니다 .item. 처음 생각했을 때, 이것이 제가 시도한 것입니다. .item { ... } .item.compact { ... } …

88 css  sass  media-queries 

부트 스트랩 3부터는 반응 형 및 표준 스타일 시트를위한 별도의 파일이 더 이상 없습니다. 그렇다면 어떻게 반응 형 기능을 쉽게 제거 할 수 있습니까?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

여러 태블릿 장치를 사용하고 있습니다-둘 다 Android 및 iOS. 현재 모든 태블릿에 대해 다음과 같은 해상도 변형이 있습니다. 1280 x 800 1280 x 768 1024 x 768 (당연히 iPad) -iPad에는이 문제가 없습니다. 장치 방향 기반 스타일을 적용하는 가장 간단한 방법은 다음 구문을 사용하여 미디어 쿼리의 방향을 사용하는 것입니다. @media all …

84 android  css  media-queries 

CSS 미디어 쿼리를 사용 max-device-width하여 장치 너비 (예 : iPhone 또는 Android 장치) 및 / 또는 max-width페이지 너비 를 대상으로하는을 대상으로 지정할 수 있습니다 . 을 사용 max-device-width하면 데스크톱에서 브라우저 창의 크기를 변경할 때 데스크톱 크기가 변경되지 않으므로 CSS가 변경되지 않습니다. 을 사용하는 경우 max-width데스크톱에서 브라우저 창의 크기를 변경할 때 …

81 css  responsive-design  media-queries