html如何适应手机？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html如何适应手机？相关的知识，希望对你有一定的参考价值。
有几种，利用meta标签、百分比法、使用CSS3单位rem、媒体查询。
利用meta标签
Meta标签主要用来描述一个html网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等，它的Description和Keywords属性，可加入网站的关键字，让网页利于搜索引擎。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。
以上标签只支持一种尺寸，正确的做法是用js动态生成下面标签，前提是要先获取屏幕尺寸。
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/android (d+.d+)/.test(ua))var version = parseFloat(RegExp.$1);
if(version>2.3) document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);
elsedocument.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
else document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
</script>
百分比法
CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了。但这只适合布局简单的页面，复杂的页面实现很困难。
使用CSS3单位rem
在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？
计算：div宽度dW2=dW1/100,px与rem之间换算除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多数浏览器font-size的最小值为12px，所以只能用100作为缩放比例。
所以会在头部加上这个JS代码：
<script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
媒体查询
媒体查询正是为解决网页适应手机屏幕。媒体查询的功能就是为不同的“媒体”设置不同的css样式，页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) .icon some styles ;具体可自行研究。
参考技术A首先你要在html页面头部加上下面的代码;viewport";content="，一些小的模块可以用固定尺寸;meta , name="。
再就是css中要应用到媒体查询，不能不用固定尺寸。其次你要把页面中的宽度修改为百分比;width=device-width; ，也就是@media;initial-scale=1"。
HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。
如何实现手机自动适应网页
将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。
一方法/步骤
-
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
-
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
将以上标签加入之后保存，再用手机打开即是自适应网页了。
二方法/步骤
-
方法：在网页头部加上这样一条meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解释：
width=device-width ：宽度等于设备屏幕的宽度
initial-scale=1.0：表示：初始的缩放比例
minimum-scale=0.5：表示：最小的缩放比例
maximum-scale=2.0：表示：最大的缩放比例
user-scalable=yes：表示：用户是否可以调整缩放比例
-
另外：如果想控制字体的大小的话，应该使用相对大小，可以用下面这段代码，一般不用也可，这里只是说名一种方法。
相对大小的字体
字体也不能使用绝对大小px，而只能使用相对大小em。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {font-size: 1.5em; }
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
以上是关于html如何适应手机？的主要内容，如果未能解决你的问题，请参考以下文章