HTML网页如何自动适应手机屏幕_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:49:22
原创
2493人浏览过

在网上看到用以下方法:

但是有些手机可以自动适应屏幕大小,而有些则不可以,请问是为什么呢?(是否跟手机屏幕分辨率有关?)
另外,加了此代码会使得网页左侧的按钮和右侧的表格之间的间距出现问题,横屏时是有间距的,但是竖屏就会导致按钮和表格重叠,请问这又是为什么呢?


回复讨论(解决方案)

贴出代码……

贴出代码……



<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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/973">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680175849948.png" alt="知网AI智能写作">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/973">知网AI智能写作</a>
                            <p>知网AI智能写作,写文档、写报告如此简单</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="知网AI智能写作">
                                <span>38</span>
                            </div>
                        </div>
                        <a href="/ai/973" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="知网AI智能写作">
                        </a>
                    </div>
                <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;}
}
这样写,宽度尽量用%

框架是个好东西

补丁宽就可以了

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号