問題タブ [vertical-rhythm]

相対単位の方が絶対単位よりも優れていると聞きましたが、ブラウザが間違って四捨五入し、計算が難しい場合があります。役立つツールを知っていますか？

SASS/コンパスを使用しました。とても簡単ですが、完璧ではありません…</ p>

初めて投稿するので、優しく扱ってください:)

そこで、Susy を使用して 2 つのボタンを並べて配置しようとしていますが、これはうまくいくようです。

ただし、ボタンに 1px の境界線を追加するとすぐに、有効な幅は 100%+4px になり、レイアウトが崩れます。

すべてのボタンのパディング値に Compass Vertical Rhythm プラグインを使用しているので、それを台無しにしたくありません。

どんな助けでも大歓迎です。

内に<tr>with 4が<th>あり、境界線がなく、<tr>and<th>はすべて 22 ピクセルの高さで、私の$base-line-height- パーフェクトに等しくなります。

ただし、 を追加する+horizontal-borders(1px, 0)と、<th>高さ 23 ピクセルで表示され、垂直方向のリズムが失われます。

これはなぜですか、どうすれば修正できますか?

コンパスの垂直リズム モジュールを適用すると、見出しが長すぎて 1 行に収まらない場合、$base-line-height 変数の値に従うため、行の高さが大きすぎるように見えるという問題がありました。一般的には、経験則に従うべきだと思います。見出しが大きいほど、行の高さが小さくなります。

特定の見出しのフォント サイズよりも $base-line-height を使用することを提案している記事を見つけました。Adjust-font-size-to および Adjust-leading-to mixin に基づいて、修正版を作成しました。

それはきれいな修正ですか？以下に基づいて、adjust-headline-leading-to の (if($relative-font-sizing, $to-size, $base-line-height)) ステートメントに問題があります。

小さなテストケースからの出力はしっかりしているように見えますが、注意して、Adjust-headline-size-to と Adjust-headline-leading-to に目に見える重大な間違いがないかどうかを確認したいと思いましたか? よろしくラルフ

Chrome を使用して Web サイトを開発しているときに、次の動作に気付きました。ページを一番下までスクロールしているときにページを更新すると、垂直方向のジャンプが見られます。

次のBootplyを参照してください。

再現するには、フルスクリーン プレビュー (右側のモニター アイコン) を開き、次のことを試してください。

1. ページを更新 (フォームの再送信を確認) --> ジャンプなし
2. 中央にスクロール、更新 (フォームの再送信を確認) --> ジャンプなし
3. 一番下までスクロールし、更新 (フォームの再送信を確認) --> 垂直ジャンプ

.align-centerジャンプは実際には、ページにクラスの図が含まれている場合に垂直のリズムを維持しようとする次の Javascript によって引き起こされます。

もちろん、この Javascript を削除すると、観測された垂直ジャンプも削除されます。私が理解していないのは、DOM の準備ができたときにパディングが適用されるため、目に見える垂直ジャンプが発生しないことです。ジャンプは、ページが一番下までスクロールされたときにChromeがビューポートを処理する方法に関係していると思いますが、これを確認/確認する方法が本当にわかりません。

これを Firefox または Safari で試してみると、ジャンプは見られません。

何かアイデアはありますか？

編集: Chrome のバグ トラッカーでバグを開きました。

私はコンパスを学んでいます.2つのミックスインについて少し混乱しています.adjust -leading-toとleader . 誰かがそれらの違いを教えてもらえますか?

どうもありがとうございました ！

次の例を取得しました: http://sassmeister.com/gist/fd882d54a8ad505e2188 この記事に基づいて:

http://atendesigngroup.com/blog/vertical-rhythm-compass

.meta 要素までのすべてが完璧な垂直リズムになっています。しかし、.meta 要素はリズムから外れます。

私はいくつかのことを試し、エラーを

base-font-size は 16px で、16px 以上はすべて正常に動作しますが、font-size を 16px 未満にすると、縦のリズムが崩れます。

base-font-size より小さいフォント サイズを使用しても、完璧な垂直リズムを実現するにはどうすればよいですか?

垂直リズムのパディング サイズを選択するための非常に基本的な質問があります。

それを言いましょう：

そして、コンテンツを含む div があります (div には境界線があります)。

次のうち、垂直方向の整列に適切に選択されるものはどれですか。これは次のとおりです。

または、違い (18-14)/2 = 2px を考慮する必要があります。

または、両方の答えが間違っている場合は、この問題へのアプローチ方法を説明してください。

これまでのところ、私は Compass 0.12.x を使用しており、Compass Vertical Rhythm モジュールのベースラインを切り替えるための有効な mixin がありました。その mixin を Compass v1.0.1 に適用しようとすると、2 つのベースラインの線の高さが変わりません。削減されたコードは次のようになります。

対応するペンはhttp://codepen.io/rpkoller/pen/lrBHKです。Compass 1.0.1 の結果のコードは次のとおりです。

Compass 0.12.x では

Compass 1.0.1 が同じ行の高さを返す原因は何ですか? 100px と 25 px のように、より異なる行の高さの値を入力すると、出力は両方のベースラインで同じになります ( http://codepen.io/rpkoller/pen/を参照)。 qjdsa )。

更新: わかりました、ようやくわかりました。この動作は、Sass 3.4 で導入された変更によるものであることが判明しました。それに応じて use-baseline mixin を変更する必要があります。