Heim >Web-Frontend >HTML-Tutorial >HTML网页如何自动适应手机屏幕_html/css_WEB-ITnose
HTML网页如何自动适应手机屏幕_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:222073Durchsuche
在网上看到用以下方法：
但是有些手机可以自动适应屏幕大小，而有些则不可以，请问是为什么呢？（是否跟手机屏幕分辨率有关？）
另外，加了此代码会使得网页左侧的按钮和右侧的表格之间的间距出现问题，横屏时是有间距的，但是竖屏就会导致按钮和表格重叠，请问这又是为什么呢？
回复讨论(解决方案)
贴出代码……
贴出代码……
<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中应该如何设置才能实现一楼的效果呢？求路过大神帮助！！
你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询
你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询
WEB上也使用的，请问如果用@Media的话，应该怎么写呢（新手不懂CSS）
还是用框架吧，简单省事
还是用框架吧，简单省事
如果不用框架的话好不好解决此问题？本人框架知识尚未学习，现亟待解决此问题
希望大家能够给予我帮助，谢谢！
还是用框架吧，简单省事
如果不用框架的话好不好解决此问题？本人框架知识尚未学习，现亟待解决此问题
要单纯通过js控制还是有难度,如果不复杂还是写两个版本吧，或者你css用%控制高度和宽度(这个比写两个版本难度更大些)
你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询
WEB上也使用的，请问如果用@Media的话，应该怎么写呢（新手不懂CSS）
@media screen and (max-width: 480px){
.aa{ width:60px; height:60px;}
.bb{padding-left:70px; line-height:30px;}
}
这样写，宽度尽量用%
框架是个好东西
补丁宽就可以了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css的顺序有可能使得样式无法实现，就像border它们一样！_html/css_WEB-ITnoseNächster Artikel：定义了3个div，如何让这3个div显示在同一行呢？为啥下面我的css代码实现不了呢？_html/css_WEB-ITnose