HTML5移动页⾯⾃适应⼿机屏幕四类⽅法
1、使⽤meta标签：viewport
H5移动端页⾯⾃适应普遍使⽤的⽅法，理论上讲使⽤这个标签是可以适应所有尺⼨的屏幕的，但是各设备对该标签的解释⽅式及⽀持程度不同造成了不能兼容所有浏览器或系统。
viewport 是⽤户⽹页的可视区域。翻译为中⽂可以叫做"视区"。
⼿机浏览器是把页⾯放在⼀个虚拟的"窗⼝"（viewport）中，通常这个虚拟的"窗⼝"（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局），⽤户可以通过平移和缩放来看⽹页的不同部分。
viewport标签极其属性：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个属性的详细介绍：
属性名取值描述
width正整数或 device-width定义视⼝的宽度，单位为像素
height正整数或 device-height定义视⼝的⾼度，单位为像素，⼀般不⽤
initial-scale[0.0-10.0]定义初始缩放值
minimum-scale[0.0-10.0]定义缩⼩最⼩⽐例，它必须⼩于或等于maximum-scale设置
maximum-scale[0.0-10.0]定义放⼤最⼤⽐例，它必须⼤于或等于minimum-scale设置
user-scalable yes/no定义是否允许⽤户⼿动缩放页⾯，默认值yes
2、使⽤css3单位rem
rem是CSS3新增的⼀个相对单位（root em，根em），使⽤rem为元素设定字体⼤⼩时，是相对⼤⼩，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。
⽬前，除了IE8及更早版本外，所有浏览器均已⽀持rem。对于不⽀持它的浏览器多写⼀个绝对单位的声明。这些浏览器会忽略⽤rem设定的字体⼤⼩。下⾯就是⼀个例⼦：
p {font-size:14px; font-size:.875rem;}
默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。
通常情况下，为了便于计算数值则使⽤62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况⽽定。设置⽅法如下：Html{font-size:62.5%(10/16*100%)}
具体不同屏幕下的规则定义，即基数的定义⽅式：可以通过CSS定义，不同宽度范围⾥定义不同的基数值，当然也可以通过js⼀次定义⽅法如下：
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
javascript登录注册界面
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
3、使⽤媒体查询
媒体查询也是css3的⽅法，我们要解决的问题是适应⼿机屏幕，这个媒体查询正是为解决这个问题⽽⽣。
媒体查询的功能就是为不同的媒体设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等。
例如：如果浏览器窗⼝⼩于 500px, 背景将变为浅蓝⾊：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
4、使⽤百分⽐
百分⽐指的是⽗元素，所有百分⽐都是这样的。⼦元素宽度50%，那么⽗元素的宽度就是100%；
所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）⼦孙元素按百分⽐定位（或指定尺⼨）就可以了，这只适合布局简单的页⾯，复杂的页⾯实现很困难。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。