ホームページ > 記事 > ウェブフロントエンド > Web レスポンシブ デザインの例 (メディア クエリなし)
Web レスポンシブ デザインの例 (メディア クエリなし)
- PHP中文网オリジナル
- 2017-06-20 13:39:501492ブラウズ
(0)前に書きました
知湖で見た記事の事件について話したら、私の心が開かれ、とても感心したので、翌日元の記事を見つけて褒めました
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; の内部要素を作成します。 list は flex アイテムになります
flex-wrap:wrap; 幅が足りない場合、内部要素が折り返されるため、ブラウザウィンドウが特定の幅に拡大縮小されると、.trunc-list の高さが変更されます
。
.trunc-list-wrapper の height: 2.25em;overflow: hidden; により
要素が非表示になるため、ズームされた要素は表示されません。
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>
以上がWeb レスポンシブ デザインの例 (メディア クエリなし)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。