웹 반응형 디자인의 예(미디어 쿼리 없음)
- PHP中文网원래의
- 2017-06-20 13:39:501525검색
(0)전에 쓴 글
Zhihu에서 본 기사에 나온 사건을 이야기하니 마음이 열리고 너무 감탄해서 다음날 원본 기사를 찾아 칭찬했습니다
5위안 , 원래 주소, 케이스는 CSS3 속성을 많이 사용합니다.
(1) 효과 시연
(2) 지식 포인트 및 효과
<div class="trunc-list-wrapper" id="mylist">
<ul class="trunc-list">
<li>
<a href="#">Home</a>
</li>
...
<li aria-hidden="true" class="control control--open">
<a href="#mylist"><span>more</span></a>
</li>
<li aria-hidden="true" class="control control--close">
<a href=""><span>less</span></a>
</li>
</ul>
</div>
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
}.trunc-list {
display: flex;flex-wrap: wrap;position: relative;
}.trunc-list li {
flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
}.control--close {display: none;
}
위는 간단한 코드입니다
display: flex; 목록은 플렉스 항목이 됩니다
flex-wrap: Wrap; 너비가 충분하지 않으면 내부 요소가 래핑되므로 브라우저 창의 크기가 특정 너비로 조정되면 .trunc-list의 높이가 변경됩니다
.
.trunc-list-wrapper의 height: 2.25em;overflow: hide; 로 인해
요소가 숨겨지기 때문에 확대된 요소를 볼 수 없습니다.
trunc-list의 높이 변경으로 인해 height: calc((2.25em - 100%) * -1000);가 적용되며, 더 많은 내용을 볼 수 있습니다.
max-height: 2.25em;
더보기를 클릭하세요.
#myList가 유효한 스트로크 포인트이므로 다음 CSS가 적용됩니다
.trunc-list-wrapper:target .control--open { display: none;
}.trunc-list-wrapper:target .control--close { display: block;
}
동시에 다음 CSS가 적용됩니다
.trunc-list-wrapper:target { height: auto;
}숨겨진 요소를 볼 수 있습니다
덜 클릭하면 유효하지 않기 때문에 앵커 포인트는 위 효과의 클리어링을 기준으로 합니다.
4. 전체 코드
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式的另一种思考</title><style>/* Basic common settings: */* { box-sizing: border-box;}html { line-height: 1.25; font-family: 'Lato', sans-serif;}.trunc-list-wrapper { height: 2.25em; overflow: hidden; padding-right: 3.5em;}.trunc-list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; position: relative;}.trunc-list li { margin: 0; padding: 0; flex: 1 0 auto;}.trunc-list a { display: block; padding: 0.5em; text-align: center; white-space: nowrap;
color: #fff; background:red;}.trunc-list a:hover,
.trunc-list a:active,
.trunc-list a:focus { background: red; }.control { position: absolute; top: 0; right: -3.5em; width: 3.5em;
height: calc((2.25em - 100%) * -1000); max-height: 2.25em;
overflow: hidden;}.control a { text-decoration: none;}.control span { font-size: 0.75em; font-style: italic;}.control--close { display: none;}.trunc-list-wrapper:target { height: auto;}.trunc-list-wrapper:target .control--open { display: none;}.trunc-list-wrapper:target .control--close { display: block;}</style></head><body><div class="trunc-list-wrapper" id="mylist"> <ul class="trunc-list"><li> <a href="#">Home</a></li><li> <a href="#">Blog</a></li><li> <a href="#">About Us</a></li><li> <a href="#">Contact Us</a></li><li> <a href="#">Help</a></li><li> <a href="#">Login</a></li><li> <a href="#">Sign In</a></li><li aria-hidden="true" class="control control--open"> <a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control control--close"> <a href=""><span>less</span></a></li> </ul></div><p>改变视口宽度大小来观察效果</p></body></html>
위 내용은 웹 반응형 디자인의 예(미디어 쿼리 없음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：모바일 페이지 레이아웃 조작 방법다음 기사：모바일 페이지 레이아웃 조작 방법