미디어 쿼리를 사용한 아이콘 크기

모바일 및 데스크톱 브라우저에서 실행되는 앱을 개발 중입니다. 아이콘 크기를 수정할 수있는 해결책을 찾으려고합니다. 아이콘이 데스크톱 브라우저에서는 작지만 모바일 브라우저에서는 더 커 보이기를 원합니다.미디어 쿼리를 사용한 아이콘 크기

미디어 쿼리로 화면 밀도를 감지 할 수 있습니까? 그렇다면 화면 크기에 따라 아이콘 크기가 결정될 수 있습니까?

또 다른 한가지 : 더 나은 선택에 따라 화면 크기 나 밀도를 감지하고 아이콘을 조정하는 것이 더 좋습니다.

출처

2013-02-14 Jacob

아이콘이 이미지 인 경우 이는 몇 달 동안 웹 개발 블로그를 밝히는 주제입니다. 할 일이 복잡합니다. 아이콘 글꼴을 사용하고 있다면 쉽습니다. – Pointy

.PNG 이미지를 사용 중입니다. – Jacob

예 픽셀 밀도를 감지하는 미디어 쿼리가 있습니다. 다음은 예입니다.

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Then you would change your background image and background image size here */ 
}

this article at CSS-Tricks에 대한 자세한 정보가 있습니다.

출처

2013-02-14 15:29:14 dsundy

이 유형의 쿼리는 웹킷 브라우저에서만 작동하므로 Opera Mini, Windows Phone의 IE 또는 FireFox 모바일, 데스크탑 Firefox 또는 데스크탑 IE 또는 데스크탑 Opera (아직 Opera 곧 웹킷으로 이동 중임) – Ryan

@ryan 오페라와 파이어 폭스에 대한 접두사가있는 변형이 있습니다. – Pointy

장치 크기 또는 픽셀 밀도를 대상으로할지 여부는 문제가됩니다. 매번 특성에 따라 달라 지므로 둘 다 결합해서는 안됩니다. 당신은 모든 것을 포함하려는 미디어 쿼리는 다음과 같습니다

@media (min--moz-device-pixel-ratio: 1.5), 
     (-o-min-device-pixel-ratio: 3/2), 
     (-webkit-min-device-pixel-ratio: 1.5), 
     (min-resolution: 1.5dppx) { 

    /* your retina rules here */ 

}

... 당신은 PNG 파일이 아닌 SVG 그래픽 또는 아이콘 글꼴로 고집하는 경우 아마도 가장 도움이된다. retinafy.me을 보길 권장합니다. 유용한 리소스 (무료는 아닙니다)는 코드의 출처입니다.

출처

2013-02-14 15:36:34 CherryFlavourPez

미디어 쿼리를 사용한 아이콘 크기

답변

관련 문제