How HTML web pages automatically adapt to mobile phone screens_html/css

How HTML web pages automatically adapt to mobile phone screens_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:49:22

Original

2103 people have browsed it

I saw the following method on the Internet:

However, some mobile phones can automatically adapt to the screen size, while others cannot. Why? (Is it related to the screen resolution of the mobile phone?)
In addition, adding this code will cause problems with the spacing between the buttons on the left side of the webpage and the table on the right side. There is a gap when the screen is horizontal, but when the screen is vertical, there is a gap. This will cause the buttons and tables to overlap. Why is this?

Reply to discussion (solution)

Post code...

<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>

Copy after login

There is currently no content in the CSS file. How should I set it in CSS to achieve the first floor effect? Ask the passing god for help! !

You can use css media query, or you can write js to determine the screen size and assign it to the page, depending on your needs. If it is only used on mobile phones, it is recommended that you write js. If it is also used on the web, it is recommended You media query

You can use css media query, or you can write js to determine the screen size and assign it to the page, depending on your needs. If you only use it on mobile phones, it is recommended that you write js. If it is web If it is also used on the Internet, I suggest you media query

It is also used on the WEB. If you use @Media, how should you write it (newbies don’t understand CSS)

Let’s use a framework, it’s simple It saves trouble

Let’s use a framework, it’s simple and saves trouble

Is it possible to solve this problem if we don’t use a framework? I haven't learned the framework knowledge yet, and I need to solve this problem urgently

I hope everyone can help me, thank you!

Let’s use a framework, it’s simpler and less troublesome

Is it possible to solve this problem without using a framework? I have not learned the framework knowledge yet, and now I need to solve this problem urgently

It is still difficult to control simply through js. If it is not complicated, just write two versions, or use % to control the height and width of your css (this It’s more difficult than writing two versions)

You can use css media query, or you can write js to determine the screen size and assign it to the page, depending on your needs. If It is only used on mobile phones. It is recommended that you write js. If it is also used on the web, it is recommended that you media query

It is also used on the WEB. If you use @Media, how should you write it (newbies don’t understand CSS )
@media screen and (max-width: 480px){
.aa{ width:60px; height:60px;}
.bb{padding-left:70px; line-height: 30px;}
}
Write it like this, try to use % for the width

The frame is a good thing

Just patch the width