implement_html/css_WEB-ITnose に使用されるレイアウト-htmlチュートリアル-php.cn

implement_html/css_WEB-ITnose に使用されるレイアウト

WBOY

リリース： 2016-06-21 09:04:06

オリジナル

847 人が閲覧しました

次のレイアウトを実装する方法

素早くレイアウトして現在のページに自動的に適応させる方法

ディスカッションへの回答(解決策)

どのような適応手法が必要ですか?

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script><style type="text/css">.small{	float: left;	width: 100px;	height:100px;	border: 1px solid #000;}.big{	float: left;	width: 200px;	height: 200px;	border: 2px solid #000;}.xxx{	height: 410px;	width: 410px;}</style></head> <body><div class="xxx"> 	<div class="big"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div></div><script type="text/javascript"></script></body> </html>

ログイン後にコピー

div の境界線を使用する

アダプティブメソッドとは何ですか?

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script><style type="text/css">.small{	float: left;	width: 100px;	height:100px;	border: 1px solid #000;}.big{	float: left;	width: 200px;	height: 200px;	border: 2px solid #000;}.xxx{	height: 410px;	width: 410px;}</style></head> <body><div class="xxx"> 	<div class="big"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div></div><script type="text/javascript"></script></body> </html>

ログイン後にコピー

class==XXX は現在のブラウザのサイズに自動的に適応します。つまり、ページをどのようにドラッグしても自動的に適応できます

適応にはどのような適応手法が必要ですか?

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script><style type="text/css">.small{	float: left;	width: 100px;	height:100px;	border: 1px solid #000;}.big{	float: left;	width: 200px;	height: 200px;	border: 2px solid #000;}.xxx{	height: 410px;	width: 410px;}</style></head> <body><div class="xxx"> 	<div class="big"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div>	<div class="small"></div></div><script type="text/javascript"></script></body> </html>

ログイン後にコピー

class==XXX は現在のブラウザのサイズに自動的に適応します。つまり、ページをどのようにドラッグしても自動的に適応できます。
デフォルメとは言えません、デフォルメと呼んでください。ページ自体のサイズをどのように変更しても、常にこのようです。

コンテンツを div に含めて、div の幅をパーセンテージ

外箱を完全に適応させることは不可能です。サイズを固定する必要があります。パーセンテージにすると、変形する可能性があります。
パーセンテージには親の「参照オブジェクト」が必要なので、正方形に固定しないと内部の要素も変形してしまうことを考えると、完全に適応させたい場合は間違いなくそうなります。ブラウザのサイズを参照してください。ただし、ブラウザが正方形であることを保証することはできません。
レスポンシブ開発を行う唯一の方法は、Baidu でレスポンシブ開発を検索してください。

完全に適応することは不可能です。パーセンテージにすると、外箱が変形する可能性があります。
パーセンテージには親の「参照オブジェクト」が必要なので、正方形に固定しないと内部の要素も変形してしまうことを考えると、完全に適応させたい場合は間違いなくそうなります。ブラウザのサイズを参照してください。ただし、ブラウザが正方形であることを保証することはできません。
唯一の方法はレスポンシブ開発を行うことです。レスポンシブ開発については Baidu で検索してください。

携帯電話の画面が関係する場合、キャンバスの解像度が変わったときにこれらの div の形状が変わらないようにするにはどうすればよいでしょうか?それは達成できるでしょうか？ポジショニングを使用すれば実現できますか?
具体的には、これらの div が解像度の変更に応じて変更できるかどうかを意味します。

完全に適応することは不可能であり、外側のボックスには固定サイズの為、パーセントにすると変形する場合がございます。
パーセンテージには親の「参照オブジェクト」が必要なので、正方形に固定しないと内部の要素も変形してしまうことを考えると、完全に適応させたい場合は間違いなくそうなります。ブラウザのサイズを参照してください。ただし、ブラウザが正方形であることを保証することはできません。
唯一の方法はレスポンシブ開発を行うことです。レスポンシブ開発については Baidu を検索してください。

携帯電話の画面が関係する場合、キャンバスの解像度が変わったときにこれらの div の形状が変わらないようにするにはどうすればよいでしょうか?それは達成できるでしょうか？ポジショニングを使用すれば実現できますか?
具体的なポイントは、これらの div が解像度の変更に応じて変更できるかどうかです。

携帯電話のみをターゲットにしている場合は、固定サイズを使用しないのはなぜでしょうか。 (私はモバイル開発の経験がないので、この詳細を考慮する必要があるかどうかはわかりません。まずは試してみて、うまく動作するかどうかを確認してみてはいかがでしょうか。) 携帯電話、タブレット、およびモバイルに対応させたい場合は、 PC の場合は、レスポンシブ開発を使用することをお勧めします。