너비에 따라 다른 CSS
마이크
"카드"보기를 사용하는 웹 사이트가 있습니다. 데스크탑에서 볼 때 카드의 CSS를 다음과 같이 설정했습니다.
width: 75%
margin: auto
"카드"가 데스크탑에서 더보기 좋은 전체 너비를 차지하지 않도록 이렇게했습니다.
그러나 내가 알아 내려고하는 것은 화면 크기가 모바일 소형 화면으로 변경 될 때 너비와 여백을 자동으로 끄는 방법입니다. 분명한 이유로 모바일보기에서 카드의 너비를 100 %로 설정하고 싶습니다. 창의 너비에 따라 CSS를 어떻게 변경할 수 있습니까?
Vivekraj KR
다음은 표준 부트 스트랩 미디어 쿼리입니다.이 메타 태그를 헤드에 넣어야합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
CSS의 다른 요소 너비에 따라 달라지는 너비
- 2
CSS의 다른 요소 너비에 따라 달라지는 너비
- 3
CSS 너비는 부모에 따라 달라야합니다.
- 4
다른 View의 너비에 따라 TextView 너비 설정
- 5
다른 td 너비에 따라 th 요소의 너비 설정
- 6
요소에 따라 CSS 조정 너비
- 7
행 너비에 따라 Android GridLayout 다른 범위 수
- 8
다른 ID의 src에 따라 ID의 CSS 변경
- 9
사용자 ID에 따라 다른 CSS 제공-Spring MVC
- 10
NodeJ : 경로 매개 변수에 따라 다른 CSS로드
- 11
다른 요소에 따라 CSS 설정 색상
- 12
CSS 높이는 너비에 따라 달라 집니까?
- 13
CSS를 사용하여 각 문자의 너비에 따라 고정 폭 글꼴 크기를 설정합니다.
- 14
Jquery CSS는 div 너비에 따라 이미지를 왼쪽으로 변경합니다.
- 15
css / javascript를 사용하여 기기 너비에 따라 펼치기-접기 다른 div 높이를 만드는 방법
- 16
HTML, CSS의 페이지 너비에 따라 단락 정렬
- 17
다른 div 위치에 따라 div 너비를 조정하는 방법
- 18
다른 브라우저의 CSS 호버 너비 스타일
- 19
이미지 스타일에 따라 다른 CSS 스타일 동작
- 20
배경에 따라 다른 이미지가있는 CSS 애니메이션
- 21
Chrome 확장 : localStorage의 옵션에 따라 다른 CSS 파일 삽입
- 22
요소 변경 번호에 따라 다른 CSS를 정의하는 방법
- 23
문서 너비에 따른 div 슬라이더
- 24
문서 너비에 따른 div 슬라이더
- 25
너비 비율에 따라 CSS 선형 그래디언트 클리핑
- 26
브라우저 유형에 따라 다른 CSS 배경 이미지를 사용할 수 있습니까?
- 27
CSS의 height 속성을 사용하지 않고 오른쪽 컨테이너 높이에 따라 왼쪽 컨테이너를 조정합니다.
- 28
CSS 미디어 쿼리 : 화면 너비에 따라 두 번째 행으로
- 29
다른 클래스 CSS 스타일에 따라 클래스의 CSS 스타일 조작
몇 마디 만하겠습니다