Responsive break point

            
              @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700");
html, * {
	font-family: 'Roboto';
}
html, body {
	height: 100%;
	min-height: 100%;
}

// media
// ---------------------------------------------------------
$w_ipad_landscape: 1024px;
$w_ipad_portrait: 768px;
$w_ipad_pro_landscape: 1366px;
$w_ipad_pro_portrait: 1024px;
$w_iphone_plus_portrait: 414px;
$w_iphone_portrait: 375px;
$w_iphone_X_landscape: 812px; // display
$w_iphone_X_landscape: 724px; // iOS Safari

$portrait: 'max-aspect-ratio: 3/2';
$landscape: 'min-aspect-ratio: 3/2';

@mixin screen($target: null) {

	@if $target == sp {
		@media
		only screen and (max-width: $w_iphone_plus_portrait) and ($portrait),
		only screen and (max-height: $w_iphone_plus_portrait) and ($landscape) {
			@content;
		}
	}

	@if $target == _sp {
		@media
		only screen and (min-width: $w_iphone_plus_portrait + 1) and ($portrait),
		only screen and (min-height: $w_iphone_plus_portrait + 1) and ($landscape) {
			@content;
		}
	}

	@if $target == tb {
		@media
		only screen and (min-width: $w_iphone_plus_portrait + 1) and (max-width: $w_ipad_pro_portrait) and ($portrait),
		only screen and (min-height: $w_iphone_plus_portrait + 1) and (max-height: $w_ipad_portrait) and ($landscape) {
			@content;
		}
	}

	@if $target == pc {
		@media
		only screen and (min-width: $w_ipad_pro_portrait + 1) and ($portrait),
		only screen and (min-height: $w_ipad_portrait + 1) and ($landscape) {
			@content;
		}
	}

	@if $target == _pc {
		@media
		only screen and (max-width: $w_ipad_pro_portrait) and ($portrait),
		only screen and (max-height: $w_ipad_portrait) and ($landscape) {
			@content;
		}
	}
	
	@if $target == p {
		@media
		only screen and ($portrait) {
			@content;
		}
	}
	@if $target == l {
		@media
		only screen and ($landscape) {
			@content;
		}
	}

}

// ---------------------------------------------------------
.box {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
	&::before {
		display: block;
		font-size: 2rem;
		font-weight: 100;
		
		@include screen(sp) {
			content: 'Smart phone';
		}
		@include screen(tb) {
			content: 'Tablet';
		}
		@include screen(pc) {
			content: 'PC';
		}
	}
	
	p {
		margin: 1rem 0;
		font-size: 1rem;
		font-weight: 100;
		
		&::before,
		&::after {
			display: block;
		}
		
		&.not {
			&::before {
				@include screen(_sp) {
					content: 'not Smart phone';
				}
			}
			&::after {
				@include screen(_pc) {
					content: 'not PC';
				}
			}
		}
		
		&.aspect {
			&::before {
				@include screen(p) {
					content: '|| Portrait ||';
				}
			}
			&::after {
				@include screen(l) {
					content: '= Landscape =';
				}
			}
		}
	}
	
	dl {
		display: flex;
		justify-content: space-between;
		min-width: 8rem;
		margin: .25rem 0;
		text-align: left;
		
		border-bottom: 1px solid #ccc;
		
		dt, dd {
			display: inline-block;
			padding: .2rem .5rem;
		}
		
		dt {
			font-weight: bold;
			&::after {
				content: ':';
			}
		}
		dd {
			text-align: right;
			
			&::after {
				content: 'px';
				margin-left: .2rem;
			}
			
		}
	}
	
}