웹 반응형 디자인의 예(미디어 쿼리 없음)-H5 튜토리얼-php.cn

웹 반응형 디자인의 예(미디어 쿼리 없음)

PHP中文网

풀어 주다： 2017-06-20 13:39:50

원래의

1468명이 탐색했습니다.

(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!