0

私は完璧にしようとしているウェブサイトを持っています、そして私が欲しいのはこのようなものです

if screen=1920x900 set size="100%"
if screen=1280x600 set size="50%"
if os="windows" set font="100%"
if os="osx" set font="50%"
if os="linux" set font="25%"



...width="{size}"
font-family="{font}"

上記のコードは単なる例です。

他のブラウザ/OS の画面サイズと同じように、画面サイズが XXXX の Windows のブラウザで、自分の Web サイトを正確に表示できるようにしたいですか?

4

4 に答える 4

2

こんにちは、以前はCSS Media queries 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

詳細は以下のリンクを参照してください。

http://cssmediaqueries.com/

http://www.css3.info/preview/media-queries/

于 2012-10-10T11:45:35.423 に答える
2

画面サイズについては、@mediaクエリを使用できます。

例：

@media screen
and (min-width: 600px)
and (max-width: 900px) {
  .class {
    background: #333;
  }
}

@media screen
and (min-width: 900px) {
  .class {
    background: #333;
  }
}

ここでもっと知ってください：

異なるバージョンの IE を対象とする場合は、条件付きコメントを使用できます。

例：

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

OSの検出はお勧めできません。しかし、それらを検出するために、たくさんのプラグインがあります。

于 2012-10-10T11:45:49.977 に答える
1

jQuery を使用して、ブラウザーのサイズと OS のバージョンを検出する必要があります。

http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/プラグインを使用できます。

次に、If/Selects/Switches などを使用して、ブラウザ/OS/サイズなどに応じて異なる CSS を使用できます。

于 2012-10-10T11:44:46.543 に答える
0

あなたは正確に何をしようとしていますか？さまざまな画面サイズの CSS ルールを設定するには、CSS メディア クエリを参照してください (例: http://www.w3.org/TR/css3-mediaqueries/ )。

OS などのフィルターを PHP 経由で定義できます (例: http://www.danielkassner.com/2010/06/11/get-user-operating-system-with-php ) 。

于 2012-10-10T11:47:06.983 に答える