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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:49 AM

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 id="销售金额合计">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>

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles