ホームページ > 記事 > ウェブフロントエンド > HTML Web ページが携帯電話の画面に自動的に適応する仕組み_html/css_WEB-ITnose
HTML Web ページが携帯電話の画面に自動的に適応する仕組み_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:222049ブラウズ
インターネットで次のメソッドを見つけました:
678906646c76cf6b5fb4d4ec8692d5c5
ただし、一部の携帯電話は画面サイズに自動的に適応できますが、他の携帯電話では適応できないのはなぜですか? (携帯電話の画面解像度と関係があるのでしょうか？)
また、このコードを追加すると、ウェブページの左側のボタンと右側のテーブルの間隔に問題が発生します。画面は横長ですが、画面を縦長にするとボタンとテーブルが重なってしまうのですがなぜでしょうか？
ディスカッションに返信 (解決策)
コードを投稿...
コードを投稿...
<html> <head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /><link href="css.css" type="text/css" rel="stylesheet" /></head><body><form method="POST"><div style="float:left;width:15%;"><p></p><br><input style="float:left;display:block;margin-bottom:12px;" type="submit" name="submit1" value="销售金额查询"></br><br><input style="float:left;display:block;margin-bottom:12px;" type="submit" name="submit2" value="销售金额查询1"></br></div></form></body>代码如下<?php header("Content-type:text/html;charset=utf-8"); $serverName = "125.72.22.123,12332"; //local表示为本地,如果你用IP就不用括号了,1433表示端口 $database = "efde"; $uid = "sa"; $ee= 'aaaa'; $pwd = "$ee"; try { $conn = new PDO( "sqlsrv:server=$serverName;Database = $database", $uid, $pwd); } catch( PDOException $e ) { die( "Error connecting to SQL Server".$e ); }echo '<div style="float:left;width:80%;"><table cellpadding="0" cellspacing="0" border="1" width="1000" style="word-break:break-all; word-wrap:break-all;">';echo '<caption><h1>2012销售金额合计</h1></caption>';echo '<tr bgcolor="#cccccc">';echo '<th>区域</th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th><th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th><th>总计</th>';echo "<br>";echo "<p></p>";echo "\n"; if(isset($_POST['submit1'])) { //SQL语句 $stmt= $conn->query("select isnull(区域,N'总计') as 区域,一月=sum(case when 月份='1' then round(销售金额/10000,2) else 0 end),二月=sum(case when 月份='2' then round(销售金额/10000,2) else 0 end),三月=sum(case when 月份='3' then round(销售金额/10000,2) else 0 end),四月=sum(case when 月份='4' then round(销售金额/10000,2) else 0 end),五月=sum(case when 月份='5' then round(销售金额/10000,2) else 0 end),六月=sum(case when 月份='6' then round(销售金额/10000,2) else 0 end),七月=sum(case when 月份='7' then round(销售金额/10000,2) else 0 end),八月=sum(case when 月份='8' then round(销售金额/10000,2) else 0 end),九月=sum(case when 月份='9' then round(销售金额/10000,2) else 0 end),十月=sum(case when 月份='10' then round(销售金额/10000,2) else 0 end),十一月=sum(case when 月份='11' then round(销售金额/10000,2) else 0 end),十二月=sum(case when 月份='12' then round(销售金额/10000,2) else 0 end),总计= sum(round(销售金额/10000,2)) from 一级订单明细表 where 年份='2012' group by 区域 with rollup"); while (list ($区域,$一月,$二月,$三月,$四月,$五月,$六月,$七月,$八月,$九月,$十月,$十一月,$十二月, $总计) = $stmt->fetch(PDO::FETCH_NUM)){ echo "<center>"; echo '<tr>'; echo '<td width="70">'.$区域.'</td>'; echo '<td>'.(float)$一月.'</td>'; echo '<td>'.(float)$二月.'</td>'; echo '<td>'.(float)$三月.'</td>'; echo '<td>'.(float)$四月.'</td>'; echo '<td>'.(float)$五月.'</td>'; echo '<td>'.(float)$六月.'</td>'; echo '<td>'.(float)$七月.'</td>'; echo '<td>'.(float)$八月.'</td>'; echo '<td>'.(float)$九月.'</td>'; echo '<td>'.(float)$十月.'</td>'; echo '<td>'.(float)$十一月.'</td>'; echo '<td>'.(float)$十二月.'</td>'; echo '<td>'.(float)$总计.'</td>'; echo '</tr>'; } echo '</table></div>'; }?></html> 現在 CSS ファイルにコンテンツがありません。どのように設定すればよいですか。 CSS で 1 階を実現するにはどうすればよいでしょうか?通りすがりの神様に助けを求めましょう！ ！
携帯電話でのみ使用する場合は、CSS メディア クエリを使用するか、js を記述して画面サイズを決定し、ページに割り当てることができます。はWebでも使用されるため、メディアクエリを使用することをお勧めします
必要に応じて、CSSメディアクエリを使用することも、JSを記述して画面サイズを決定し、ページに割り当てることもできます。携帯電話で使う場合はjsで書くことをお勧めします
WEBでも使う場合はメディアクエリを書くことをお勧めしますWEBでも使う場合はどのように書けばよいでしょうか。 (初心者は CSS を知りません)
フレームワークを使用しましょう、シンプルで手間が省けます
フレームを使用しましょう、シンプルで手間が省けます
フレームワークを使用しない場合はどうすればよいですか? ?私はまだフレームワークの知識を学習していないので、この問題を早急に解決する必要があります
皆さんが私を助けてくれることを願っています、ありがとう！
フレームワークを使用しましょう。シンプルで手間もかかりません
フレームワークを使用せずにこの問題を解決することは可能ですか?まだフレームワークの知識を学んでいないので、この問題を早急に解決する必要があります
js だけで制御するのはまだ難しいです。複雑でない場合は、2 つのバージョンを記述するか、% を使用して高さと幅を制御します。 CSS (これは 2 つのバージョンを記述するよりも困難です)
必要に応じて、CSS メディア クエリを使用するか、JS を記述して画面サイズを決定し、それをページに割り当てることができます。携帯電話でのみ使用される場合は、js を記述することをお勧めします。Web でも使用される場合は、メディアクエリをお勧めします
WEB でも使用される場合は、どうすればよいですか。それを書いてください（初心者はCSSを理解していません）
@media screen and (max-width: 480px){
.aa{ width :60px; height:60px;}
.bb{padding-left:70px; :30px;}
}
このように書いて、幅に % を使用してみてください
フレームは良いものです
パッチの幅は問題ありません