純粋なCSSは移動端のよくある配置を実現します——高さと幅のフックの秘密
純粋なCSSは移動端のよくある配置を実現します——高さと幅のフックの秘密
穴を踏まないで振り向かない.以前、私は1つのプロジェクトでcss 3のcalc計算属性を大量に使用しました.コードを書くときは本当に爽やかではありませんね...しかし、プロジェクトがオンラインになってから、私を崩壊させました.理由は簡単です.アンドロイド4.4より低いバージョンの携帯電話では、持参したブラウザはこの属性をサポートしていません.
国産のチーターブラウザや他のブラウザでは、サポートされていない可能性があります.要するに、この穴は大きく踏んだ.でも大丈夫です.ほとんどのよくあるレイアウトの問題は、私は解決できます.でも、次は...私は本当に少し分かりにくいです.しかし、大丈夫です.私の研究を通じて、最終的にはすぐにCSSで解決しました.
必要な効果は次の図です.
需要分析
図を見ると、実は簡単です.幅が一定であれば、このレイアウトはあまり簡単ではありません.
問題は、設備の幅が固定されていないことですよ.では、問題は、具体的な幅が分からないときに、どのように対応する高さを設定するかということです.
すなわち、CSSで高さと幅のフックの属性を見つける方法である.このパラメータが存在する限り、問題は解決する.
では、このパラメータはありますか?
あります.それがpadding
コード実践
一般的にはpaddingにこの特性があるとは思えない.でも、思い出したら、この問題はすぐに解決して、コードを見てみましょう.
HTML構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>CSSコード
* {margin: 0;padding: 0;}
.box1 {width: 50%;padding-bottom: 50%;float: left;background: #123;}
.box2 {width: 50%;padding-bottom: 25%;float: right;background: #234;}
.box3 {width: 50%;padding-bottom: 25%;float: right;background: #345;}まとめ
よくあるCSSパラメータについては、中の面白いものを知るのは難しいかもしれません.あるいは、見ても見ていないかもしれません.
私たちがいくつかの問題に直面した時、特にこのような問題を配置して、私たちが考えなければならないのは、CSSで解決することができて、時々一人でJSを考えます.結局、JSはインタラクティブに使用され、CSSはレイアウトに使用される.
FungLeoオリジナル、転載はバージョンの申明を保留して、そして先発の住所を保留してください:http://blog.csdn.net/fungleo/article/details/50811589