CSS3 미디어 반응형 레이아웃 도입 예
- 高洛峰원래의
- 2017-03-04 10:36:441502검색
반응형 레이아웃은 다양한 단말기의 사용자에게 보다 편안한 인터페이스와 더 나은 사용자 경험을 제공할 수 있습니다. 현재 대형 화면 모바일 장치가 인기를 누리고 있는 상황에서 이를 "대세"라고 해도 과언이 아닙니다. 점점 더 많은 디자이너가 이 기술을 채택함에 따라 많은 혁신뿐만 아니라 일부 확립된 패턴도 볼 수 있습니다. 기술이 발전함에 따라 CSS3의 특성도 널리 사용되었습니다. CSS3의 반응형 레이아웃과 마찬가지로 CSS3의 새로운 태그 중 상당수도 매우 발전되었습니다. 원래는 PC에서만 표시됩니다. 이제 @media를 추가하여 반응형 웹페이지를 만들 수 있습니다. PC나 모바일에서 사용할 수 있으며 확장성이 매우 뛰어납니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media only screen and (max-width:200px ) {
#p{
background: red;
}
}
/* 大于300px*/
@media only screen and (min-width:300px ) {
#p{
background: yellow;
}
}
</style>
<body>
<p id="p">小于200px背景变红色大于300px背景为黄色</p>
</body>
</html>코드 효과
@media는 단일 조건 또는 이중 조건에 사용할 수 있습니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media (min-width:200px ) and (max-width:500px ) {
#p{
background: red;
}
}
</style>
<body>
<p id="p">200px以上并且500px以下背景变成红色</p>
</body>
</html>이 코드는 200px보다 작거나 500px보다 크면 효과가 표시되지 않습니다.
간단한 @media로 반응형 페이지를 구현하는 것이 참 쉽죠? ?
직접 할 수 있습니다. 450px 이상의 페이지 효과입니다
450px 이하의 페이지 효과입니다
일반적인 접근 방식 즉, 각 p가 응답적으로 450px 미만으로 줄어들면 각 p의 너비는 100%
이고 높이는 자동으로 작은 것을 발견했습니다. 이 웹 페이지를 작성할 때 문제가 발생했습니다. 하단 탐색이 날아 갔을 때 하단에 평화롭게 떨어지지 않고 여기서 약간의 지식을 공유하겠습니다. 이것이 저의 최종 해결책입니다. 하단의 p에만 스타일을 지정하면 됩니다. 둘 다 하단에 안전하게 고정됩니다. 또한 미디어의 가로 및 세로 화면에 대한 응답도 있습니다. 세로 화면은 @media(orientation:portrait)입니다.
세로 화면은 @media(orientation:landscape)입니다. 이런 식으로 가로 및 세로 화면에 적용할 수 있습니다. 예를 들어 자체 이력서를 만들 때 반응형 레이아웃을 사용할 수 있습니다. HR에서도 활용할 수 있습니다. 휴대폰으로 이력서를 보면 기회가 조용히 찾아올 수도 있습니다
위의 CSS3 미디어 반응형 레이아웃의 간단한 예는 제가 편집자가 공유한 내용입니다. 이것이 당신에게 참고가 되기를 바라며, PHP 중국어 웹사이트를 지원해주기를 바랍니다.
CSS3 미디어 반응형 레이아웃의 더 많은 예와 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!