問題タブ [skeleton-css-boilerplate]

Skeleton は、レスポンシブ Web デザインの原則に従って、モバイル ブラウザにも適合するようにスケーリングされます。Bootstrap は同じものを提供していますか?

このページをチェックしてください: http://new.brixwork.com/realtors/real-estate-website-features

大きなコンピューター画面の下では、画像とテキスト ブロックが階段状に交互に配置されています。ある div では画像が右に、別の div では左に、画像が配置されています。しかも4ブロック。

レスポンシブ グリッド デザインに Skeleton フレームワーク (www.getskeleton.com) を使用しているので、グリッドはビューポート クエリでサイズ変更されます。これは素晴らしいことです。ただし、画像とテキスト ボックスがシャッフルして重なり合うと、iPhone または iPad の垂直ビューで問題が発生します。

それ以外の

画像 テキスト テキスト 画像 画像 テキスト テキスト 画像

私は得る

画像 テキスト テキスト 画像 画像 テキスト テキスト 画像

オブジェクトが HTML に入力された順序のためです。

問題は、CSS を介してアイテムを再配置する賢い方法があるかどうかです。私はすでに次のようなメディアクエリを使用しています:

何か案は？ウィンドウサイズを検出し、回避できる場合はサイズを変更するためにjQueryに頼らずにこれを行いたいです。PHP を使用して「エコー」の DIV オーダーを変更することはできません。これは、タブレットが水平位置から垂直位置に移動した場合に再シャッフルを効果的に実行したいためです。

Base980pxグリッドとBase1003グリッドを備えたcssグリッドシステムを知っている人はいますか？以前はスケルトンを使用していましたが、Base 960GridMaxです。

ありがとう。

私はwww.getskeleton.comを見ています。私のヘッダーとフッターは100％に及ぶことになっています。フレームワークを「壊す」ことなくこれを行うことはできますか？または、レイアウトを960pxに制限する必要がありますか？

私はハンドルバーとMeteorを初めて使用し、新しいプロジェクトでSkeletonを実装しようとしています。ただし、デフォルトのSkeletonコードを新しいMeteorプロジェクトにドロップすると、次のエラーが発生します。

アプリケーションのバンドル中の例外：

エラー：一部の行にあるHTMLファイルを解析できませんでした。ごめん

私の読書は、これがハンドルバーが通常のHTMLではなく、Doctype行が正しく解析されていないことと関係があることを示唆していますか？

このエラーの正確な原因と、それを修正するにはどうすればよいですか？

24 列の 960gs で構築された Web サイトのフォトショップ モックアップがあります。また、スケルトンのボイラープレートhttp://www.getskeleton.com/に反応するようにしたい

私のデザインは 24 列ベースで、スケルトンは 16 列をサポートするため、スケルトンを 24 列で動作させる方法はありますか?

ありがとう！マルチェロ

レスポンシブ SKELETON フレームワークを Isotope と組み合わせようとしていますが、これまでのところ問題が発生しています。ブラウザーのサイズを変更すると (特に、ブラウザーを最小化してから最大化すると)、一部の列がスタックしたままになります。webkit-animation を 0.1 秒以下に設定すると機能しますが、これまでのところ 0.8 秒を使用すると正しく反応しません。

ここに私がこれまでに持っているものがあります: http://www.paulbauer.net/development/animate.html

誰でも助けることができますか？

敬具、ポール

それで、レスポンシブグリッドフレームワークであるSkeletonのデモをいじり始めたところです。

私のデモページでは、ヘッダーでH1を8列のdivに入れ、ボタンを8列のグリッドに入れようとしました。これらは16列のコンテナ内にあります。

ただし、ボタンはH1の下にドロップします。

私はこれがどこで間違っているのか本当にわかりません。誰かが明白な何かを見ることができれば、それは最も役に立ちます。

http://getskeleton.com/のSkeletonCSSボイラープレートから始めたいと思い ます。960gsテンプレートを使用して設計およびスクリプトを作成するのは初めてですが、まったく理解できません。

いくつかのチュートリアルによると、ページの幅は16列単位で構成されていることを理解しています。たとえば、ページを10単位の列と6単位の列に分割できます。

スケルトンlayout.cssからすぐに次のコードを取得しました。

問題は、ページを5つの部分に分割したいということです（もちろん、マージンあり）...しかし、どうやって？3つの列を5回使用できますが、合計で15列になります。これを行う方法はありますか？

前文：

ややレスポンシブなテーマ (スケルトン) を使用しています。画面サイズが小さい場合は、レイアウトを 1 列に変更します。

私の問題は：

画面のサイズを変更しても、ヘッダー画像 (管理パネルのテーマ オプションを使用して挿入したもの) がスケーリングされません。常に 940x150 のままです。モバイルで表示すると、左側の 1 列にコンテンツを含むフル サイズのヘッダーが表示されるため、あらゆる種類の空白が残ります。

したいこと: 画面の幅に合わせて画像を縮小する

また

ヘッダー画像を小さな画面サイズに合わせたものに置き換えます。

オプション 2 の問題は、すべてのデバイスが同じ画面幅を持っているわけではないため、ある程度までスケーリング可能である必要があることです。

理想的には：

以下の幅を超えると、画像は 700 程度 (iPad の横長) と 940 標準の間の画面に収まるようにスケーリングされます。

特定の画面幅 (たとえば、タブレット/iPad サイズ以下、最大幅 700 程度) を下回ると、画像は小さい方の画像に交換され、300 から 700 程度 (iPad サイズのすぐ下) の間で拡大または縮小されます。 ）。

このようにして、画像は常にサイトのレンダリングに適切なサイズになります.

この特定の画像の問題は、中央の空白 (空のスペース) の量です。特定の幅を下回ると、画像の要素がアーティファクトになり、それらの間に非常に多くのスペースができて乱雑になると思います。

サイト：

porthuronairportshuttle.com