@미디어 최소 너비 & 최대 너비
나는 이것을 가지고 있다.@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 */
}
이 설정을 사용하면 아이폰에서는 작동하지만 브라우저에서는 작동하지 않습니다.
제가 이미 가지고 있어서 그런가요?device메타에서, 아마도.max-width:480px대신에?
가장 좋은 방법은 오래된 브라우저(IE 5.5, 6, 7, 8 포함)는 읽을 수 없기 때문에 오래된 브라우저의 기본 CSS를 쓰는 것입니다.@media. 사용할때@media, 이렇게 사용합니다.
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
하지만 당신은 당신의 마음대로 할 수 있습니다.@media. 이것은 제가 모든 브라우저의 스타일을 만들 때 가장 잘 찾은 것의 예일 뿐입니다.
또한! 인쇄성을 찾으시는 분들은@media print{}.
근본적인 문제는 다음과 같습니다.max-device-width오래된 것과 비교하여max-width.
"device" 키워드를 사용하면 브라우저 창의 너비가 아니라 화면의 물리적 차원을 대상으로 합니다.
예를 들어,
@media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
대
@media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
데스크톱 화면과 같은 작은 장치의 웹 사이트에서 동작하는 경우, 이 메타 태그를 다음에 헤더에 넣어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
미디어 쿼리의 경우 다음과 같이 설정할 수 있습니다.
모바일/ cellphone 폭을 모두 커버합니다.
@media only screen and (min-width: 200px) and (max-width: 767px) {
//Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
}
iPad 및 iPad pro의 경우 사용해야 합니다.
@media only screen and (min-width: 768px) and (max-width: 1024px) {
//Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //
}
랜드스케이프 모드용 CSS를 추가하려면 이를 추가할 수 있습니다.
및 (방향: 가로)
@media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
//Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}
정확한 값은content속성은 다음을 포함해야 합니다.initial-scale대신:
<meta name="viewport" content="width=device-width, initial-scale=1">
^^^^^^^^^^^^^^^브라우저에서 응답성을 위해 최소 너비와 최대 너비를 모두 포함하려면 다음을 사용할 수 있습니다.
@media (min-width: 768px) and (max-width: 992px){...}
@media (min-width: 480px) and (max-width: 767px) {...}
어떤 아이폰은 뷰포트를 이렇게 둬야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
언급URL : https://stackoverflow.com/questions/13550541/media-min-width-max-width
'source' 카테고리의 다른 글
| 각 12개의 'ng serve'는 거의 프로덕션 빌드와 같이 앱을 느리게 만듭니다. (0) | 2023.11.07 |
|---|---|
| GAE에서 완벽하게 유효한 XML을 구문 분석할 때 "Prolog에서 컨텐츠가 허용되지 않습니다. (0) | 2023.11.07 |
| 오라클 디버깅 기법 (0) | 2023.11.07 |
| Angular의 두 가지 사례가 필요합니다.JS $http 서비스? (0) | 2023.11.07 |
| 각 리소스 호출 및 $q (0) | 2023.11.07 |