반응형 viewport 및 해상도별 css

뷰포트




해상도별 CSS (출처 : https://goo.gl/v5Lktq )


/* 스마트폰 (가로 및 세로) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 사용자 코드 */
}

/* 스마트폰 (가로 ) ----------- */
@media only screen and (min-width : 321px) {
/* 사용자 코드 */
}

/* 스마트폰 (세로) ----------- */
@media only screen and (max-width : 320px) {
/* 사용자 코드 */
}

/* 아이패드 (가로 및 세로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 사용자 코드 */
}

/* 아이패드 (가로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이패드 (세로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* PC 및 노트북 ----------- */
@media only screen and (min-width : 1224px) {
/* 사용자 코드 */
}

/* 대형 스크린 ----------- */
@media only screen and (min-width : 1824px) {
/* 사용자 코드 */
}

/* 아이폰 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 및 세로 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 ------ */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 세로 ------ */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이폰 6 세로 및 가로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* 사용자 코드 */
}

/* 아이폰 6 가로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 6 세로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 및 세로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 세로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이패드 미니 가로 및 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}

/* 아이패드 미니 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}

/* 아이패드 미니 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}


'취미생활 > 혼자삽질기' 카테고리의 다른 글

plex movie feed  (0) 2018.12.29
코드이그나이터 RSS파싱 라이브러리  (0) 2018.12.27
반응형 viewport 및 해상도별 css  (0) 2018.12.26
codeigniter index.php 제거하기  (0) 2018.12.24
mysql 사용자에게 테이블 권한주기  (0) 2018.12.24
CSS reset  (0) 2018.12.21

댓글()

햄버거메뉴 애니메이션 주기

모바일에서 많이 사용하는 메뉴아이콘 일명 햄버거


애니메이션 효과를 줘보자 


예제 : https://codepen.io/lovejin90/pen/REoZNE




소스코드

	
	$(function(){
	  $('.menu-box .menu-ui').click(function(){
		$(this).toggleClass('active');  
	  });
	});
	.menu-box .menu-ui,
	.menu-box .menu-ui span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-box .menu-ui {
		position: relative;
		width: 25px;
		height: 25px;
		z-index: 4;
	}

	.menu-box .menu-ui span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000000;
		border-radius: 4px;
	}

	.menu-box .menu-ui span.active{
		background-color: #ffffff;
	}

	.menu-box .menu-ui span:nth-of-type(1) {
		top: 0;
	}

	.menu-box .menu-ui span:nth-of-type(2) {
		top: 9px;
	}

	.menu-box .menu-ui span:nth-of-type(3) {
		bottom: 4px;
	}

	.menu-box .menu-ui.active span:nth-of-type(1) {
		-webkit-transform : translateY(10px) rotate(-45deg);
		transform : translateY(10px) rotate(-45deg);
	}
	.menu-box .menu-ui.active span:nth-of-type(2) {
		left : 50%;
		opacity : 0;
		-webkit-animation : active-menu-bar05 .8s forwards;
		animation : active-menu-bar05 .8s forwards;
	}
	.menu-box .menu-ui.active span:nth-of-type(3) {
		-webkit-transform : translateY(-9px) rotate(45deg);
		transform : translateY(-9px) rotate(45deg);
	}


댓글()

css 애니메이션 사용하기

css 애니메이션 사용하기



보통 위와같은 효과를줄때 예전엔 jquery 를 사용했었는데 요즘엔 css로 처리할때도 있다.



	
        
        Test
        
        
        
	
	
        
        

Hello World1

Hello World2

Hello World3

/*

  애니메이션 지속시간

  all 대신하여 지정하여 넣어도됨.

*/

transition: all .8s;

-webkit-transition: all .8s;

-moz-transition: all .8s;

// 애니메이션 딜레이

transition-delay: .5s;



https://codepen.io/lovejin90/pen/pqjZaa

태그 : CSS

댓글()

css 영어 입력시 줄바꿈처리

한글은 줄바꿈 잘되는데 영어가 안될때 아래 css추가하면된다.

 

word-break:break-all;

 

태그 : CSS

댓글()