«media-queries» 태그된 질문

미디어 쿼리를 사용하면 화면 및 인쇄와 같은 미디어 유형과 뷰포트 및 장치 높이와 너비와 같은 미디어 기능의 조건에 따라 CSS 스타일을 조건부로 적용 할 수 있습니다. W3C CSS3 사양의 일부입니다.

5
미디어 쿼리에서 "스크린"과 "전용 스크린"의 차이점은 무엇입니까?
미디어 쿼리 screen와 only screen미디어 쿼리 의 차이점은 무엇입니까 ? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 왜 사용해야 only screen합니까? 않습니다 screen자체가 렌더링 할 수있는 충분한 정보를 제공하지 만 화면을? 다음 세 가지 방법 중 하나를 사용하여 반응 형 …
487 css  media-queries 
15
미디어 쿼리 : 데스크톱, 태블릿 및 모바일을 타겟팅하는 방법
미디어 쿼리에 대한 조사를 해왔으며 특정 크기의 기기를 타겟팅하는 방법을 여전히 이해하지 못합니다. 데스크톱, 태블릿 및 모바일을 타겟팅 할 수 있기를 원합니다. 불일치가 있음을 알고 있지만 이러한 장치를 타겟팅하는 데 사용할 수있는 일반 시스템을 사용하는 것이 좋습니다. 내가 찾은 몇 가지 예 : # Mobile only screen and (min-width: 480px) …
12
CSS @media 규칙을 인라인으로 넣을 수 있습니까?
배너 이미지를 HTML5 앱에 동적으로로드해야하며 화면 너비에 맞게 몇 가지 다른 버전을 원합니다. 휴대 전화의 화면 너비를 올바르게 결정할 수 없으므로이 작업을 수행 할 수있는 유일한 방법은 div의 배경 이미지를 추가하고 @media를 사용하여 화면 너비를 결정하고 올바른 이미지를 표시하는 것입니다. 예를 들면 다음과 같습니다. <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 이것이 가능합니까, …
293 html  css  media-queries 
5
@ 미디어 최소 너비 및 최대 너비
이 @media설정이 있습니다. HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ …
3
@ 미디어 미디어 쿼리 및 ASP.NET MVC 면도기 구문 충돌
Razor 뷰 엔진을 사용하여 ASP.NET MVC에서 실행되는 대규모 사이트가 있습니다. 전체 사이트의 모든 일반 스타일이 포함 된 기본 스타일 시트가 있습니다. 그러나 때때로 페이지의 특정 스타일 <head>이 있습니다. 일반적으로 한두 줄입니다. CSS를 <head>엄격하게 분리 하지는 않지만 특히 해당 페이지에 특정한 한 두 줄의 경우 CSS를 선호하지 않습니다. 다른 파일을 첨부하거나 …
17
$ (window) .width ()는 미디어 쿼리와 동일하지 않습니다
프로젝트에서 Twitter Bootstrap을 사용하고 있습니다. 기본 부트 스트랩 스타일뿐만 아니라 내 자신의 일부를 추가했습니다. //My styles @media (max-width: 767px) { //CSS here } 또한 뷰포트의 너비가 767px보다 작을 때 페이지에서 특정 요소의 순서를 변경하기 위해 jQuery를 사용하고 있습니다. $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); …
16
CSS3 미디어 쿼리가 작동하지 않는 이유는 무엇입니까?
styles.css에서 미디어 쿼리를 사용하고 있으며 둘 다 변형을 사용합니다. /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } 창을 축소하면 일반 브라우저 (Safari, Firefox)에서 원하는 레이아웃으로 사이트 크기가 조정되지만 휴대 전화에는 모바일 레이아웃이 전혀 표시되지 않습니다. 대신 기본 CSS 만 표시됩니다. …
11
CSS 미디어 쿼리에 대한 IE8 지원
IE8은 다음 CSS 미디어 쿼리를 지원하지 않습니다. @import url("desktop.css") screen and (min-width: 768px); 그렇지 않은 경우 대체 작성 방법은 무엇입니까? Firefox에서도 동일하게 작동합니다. 아래 코드에 문제가 있습니까? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
19
배경색과 관련된 CSS @media 인쇄 문제;
나는이 회사에서 처음 왔으며 몇 마일의 CSS를 사용하는 제품이 있습니다. 앱에 인쇄 가능한 스타일 시트를 만들려고하는데에 문제가 background-color있습니다 @media print. @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } 다른 모든 기능은 테두리를 수정할 수 있지만 background-color인쇄에서는 나오지 않습니다. 이제 나는 더 자세한 내용 …
176 css  media-queries 
10
부트 스트랩 3 중단 점 및 미디어 쿼리
온 부트 스트랩 3 미디어 쿼리 문서 는 말합니다 : Less 파일에서 다음과 같은 미디어 쿼리를 사용하여 그리드 시스템에서 주요 중단 점을 만듭니다. 초소형 장치 (전화, 768 픽셀 미만) : 미디어 쿼리가 없습니다. 이것이 부트 스트랩의 기본값이므로 소형 기기 (태블릿, 768 픽셀 이상) : @media (min-width: @screen-sm-min) { ... } …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.