CSS デザインにおける不変と変数

「人が生きていくうちに、ある人は顔になり、ある人はリジになる。それはすべて時代によって決まる。」 - 「グランド マスター」

リジと顔を再構築する場合、HTML はリジを担当する必要があり、CSS は顔を担当する時が来ました。今回はCSSを可変性と不変性の観点から分析してみます。

面接の質問

まず第一に、これは面接の質問です、第二に、私はとにかくこの面接の質問をしたことがありません、結局、どの工場からの面接の質問だったか忘れてしまいました。

具体的な要件は忘れましたが、一般的な意味は、コンテンツをウィンドウの垂直方向の中央に配置することです。テキストは上部にある場合は上下に拡張する必要があります。下部にさらにテキストがある場合は、下に拡張する必要があります。 サイズは固定されていますが、テキストの量は固定されていません (赤い線は説明を補助するために私が追加したものです)。ここで、テキストは可変要素に属し、画像は固定要素に属します。

思考分析

まず、ここの画像はすべて同じ水平線上にあることがわかり、テキストの量は画像にまったく影響を与えないため、考えられる解決策は 2 つあります。テキストの通常のドキュメント フローと画像の絶対配置。2 番目のタイプのテキストは絶対的に配置され、画像はドキュメント内で通常どおりに配置されます。

第二に、上のテキストの拡張方向が上向きであるため、通常のドキュメントの流れの方向に違反しています(通常、テキストが増加するにつれて下に拡張するはずです)。そのため、上のテキスト部分は絶対に配置する必要があると結論付けることができます。一番下の値

最後に、上記の 2 つの理由に基づいて、テキストの絶対位置と画像の通常のドキュメント フローを使用して、最初に 2 番目の解決策を使用してテストします。

ここでは、前の記事の逆アセンブリの考え方を使用して、次のような HTML 構造を取得します:

ul.demo
    li
        .text-top
        img.img-center
        .text-bottom

メインの CSS コードは次のとおりです:

.demo{ position:absolute; top: 50%;
} .demo li{ float: left; width: 120px; margin: 0 20px; position: relative;
} .text-top{ position: absolute; bottom: 90px; left: 0;
} .img-center{ margin-top: -34px; width: 120px; height: 68px;
} .text-bottom{ position: absolute; top: 50px;
}

一般的な例

コンテンツの流体レイアウト

ここで選択しますサイドバーは固定され、コンテンツは残りの幅の流動的なレイアウトになります。サイドバーは固定要素であり、コンテンツは変動要素です。

section.section-main
    .inner-center.clearfix
        .main>.content
        aside.aside-right

rree

グラフィックとテキストの混合

一般的に、画像の幅は固定されていますが、テキスト部分の幅は設定されていません。固定係数は画像の幅、可変係数はテキストの幅です。

.main{ float: left; width: 100%;
} .main .content{ margin-right: 320px;
} .aside-right{ float: left; width: 300px; margin-left: -320px;
}

rree

コンテナの幅は可変ですが、アスペクト比は一定です

詳しくは、CSSでコンテナを比例的に拡大縮小する方法を参照してください。ここでは詳細は説明しません。定数要素はアスペクト比です。 、変動要因は幅です。

モバイル端末では可変および不変

モバイル端末の再構築を始めたばかりの多くの人は、通常、モバイル端末はすべてパーセンテージを使用するのかという質問をします。実際、rem、vw、vh などの新しい単位とは別に、パーセンテージに加えて、px もモバイル端末で使用できます。これは、まったく考えられていません。どの単位を使うか、最も重要なことは可変と不変を把握することです。よく理解すれば、モバイル端末の再構築も実はPCと同じです。もちろん、PC で幅と高さを固定に設定することに慣れている場合は、おそらくイライラするでしょう。

全画面画像スクロール

全画面、vw がまだ使用できない場合は、100% にする必要があります (ここでの全画面とは、高さを除いた幅が画面全体をカバーすることを意味します)。

.imgtext-mix
    a.mix-img-link>img.mix-img
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro

.mix-img-link{ float: left; width: 200px; margin-right: 20px;
} .mix-text{ overflow: hidden;
}

写真とテキストの混合リスト

相変わらず写真とテキストの混合配置ですが、笑、PCの場合は、右側の変数テキストを無視して直接幅を設定できるかもしれませんが、モバイル端末の場合は、申し訳ありませんが、この変動要因を考慮する必要があります。

这个估计90%的移动端都有这个效果，当然不可能设计给你的是375px的稿子，然后你就做了个375px宽度的效果。但是如果按照设计稿的比例，然后设置图片和宽度的百分比呢，这种情况图片宽度的改变，当然会影响图片高度的改变（如果是固定的高度那图片估计就没法看了，各种被拉伸或是变形），而图片高度的改变就会影响整体行的改变，那估计拿着不同的手机，看到的右边的文字内容或高或低也是醉了。

百分比效果大概如下图：

所以这里一般设计的是图片固定大小不变，右边文字可变，占满其余空间。实现跟上面的图文混排一样，当然技术上可以使用很多方法如flex，absolute，float等

单行列表

同样单行列表，标题因为长度不一属于可变因子，不宜直接控制其宽度。而右侧的一些按钮或辅助信息相对来说使用绝对定位在右边比较合理。

ul.line-list
    li
        p.title+i.icon-xxx

.line-list li{
    position: relative;
    padding-right: 40px;
    line-height: 40px;
}
.line-list li .icon-xxx{
    position: absolute;
    right: 10px;
    top: 50%;
    tranform: translate(0, -50%);
}
// 如果文字比较长，需要做超出省略截断
.line-list li .title{
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

等分

这里的等分指水平的等分，可以使用的技术有flex，float，table-cell等，其中float应该是最low的，因为你必须要设置item的宽度，三等分设置33.33%，四等分设置25%等，这种重复利用性太low，已经不适合更高级的移动端了，所以flex和table-cell是不错的选择，根本不需要在意item的个数（当然得确定一行能显示下，显示不下那也是悲催）。所以这种情况下连单位都是多余的。

ul.equal-list
    li*n

// flex
.equal-list{
    display: flex;
}
.equal-list li{
    flex: 1;
}
// table-cell
.equal-list{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.equal-list li{
    display: table-cell;
}

translate

translate中使用的百分比单位是针对自己宽高的百分比，所以对于未知宽高的计算来说，是非常大的优势，尤其用在水平和垂直居中上。

.center-translate{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

当然这些变与可变的还有很多，总之，在移动端的可变因子比pc上更多，更多的对宽度或高度的不确定，就需要各种方法去避免直接设置死宽度或高度，当然庆幸的是，css3的支持让这些不确定因素的控制变得趋向简单。

变与不变之道

最后不管是移动端还是pc端，对于动不动就设置一个具体width或height的方式注定可扩展性欠缺。所以尤其是在做通用组件的时候，一定要进一步深挖掘，了解更多的使用场景，每个场景的一些特殊特征，甚至于对未来的修改都有可预见性。

可能这里说得更多的是宽度方面的控制，其实对于方法的选择也一样，同一种效果，可能有很多方法去实现，而每种方法都有各自的利弊，所以也要根据实际情况去灵活变通使用，这同样也属于可变的。如果你所有的都是一刀切，那就是固定的一个思维了，无所谓变通了。

如果从一个更高的角度来说，没有什么是恒定的不变，一切皆可变。也许这个站点的不可变，到了那个站点就得变，所以拒绝教条主义，一切从实际情况出发，根据需求分析，得出一个合理的实践。