프프프

위와 같이 좌표값을 지정한 상태에서 

이런 유형으로 고치려 하면 미리 지정해둔 좌표값을

이렇게 초기화 시켜줘야 한다.

그러나 역시 IE에서 되지 않았다.

*IE를 위한 해결 방법

auto값을 추가적으로 주면 해결이 된다.

• Chrome 브라우저에서 box-sizing: border-box 를 사용했을 때 브라우저 줌 레벨이 100%보다 작다면, select 엘리먼트를 사용한 선택 옵션을 사용하는 데 문제가 발생한다.
• IE 8은 min/max-width/height가 사용되었을 때 box-sizing : border-box 설정을 무시한다.
• Safari 6.0.x에서는 display: table 로 설정된 요소에 box-sizing 속성이 적용되지 않는다.
• IE 9는 해당 요소의 position : absolute | fixed일 때나, overflow: auto | overflow-y: scroll일 때, 스크롤바의 가로를 줄여버린다. (IE 9 will subtract the width of the scrollbar to the width of the element when set to position : abosolute/fixed, overflow: auto/ overflow-y: scroll)
• Android 브라우저는 HTML select element의 가로, 세로 면적을 정확히 계산하지 못한다.
• IE 8에서 min-width 속성은 해당 요소의 box-sizing 값이 border-box로 설정이 되어있어도, content-box에 적용이 된다.

출처: http://ccuram.tistory.com/27

반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다.

가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.

#movie-player-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.26%;
}
#movie-player-wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖에 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.

가변 크기의 동영상 플레이어를 넣어야 하는 경우가 있었는데 요긴하게 사용했다.

출처 : https://hyeonseok.com/soojung/css/2012/08/22/712.html

/* IPHONE 3 IMAGES

================================*/

@media all and (-webkit-min-device-pixel-ratio: 2){

    /* my small background imgs here.... */    

}

/* IPHONE 4 'retina' IMAGES

================================*/

@media all and (max-device-width: 480px){

    /* my high-res background imgs here.... */    

}

@media (max-width: 480px) {}

/*Tablet & Desktop Device*/

@media all and (min-width:768px) {

.

/*Tablet Device*/

@media all and (min-width:768px) and (max-width:1024px) {

/*Desktop Device*/

@media all and (min-width:1025px) {

@media all and (min-width:768px) and (max-width:1024px) { ... } 

// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행

@media all and (width:768px), (width:1024px) { ...}

// 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { ... }

// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행