HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。viewport标签极其属性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

width文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

device-width文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

height文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

device-height文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

initial-scale文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

[0.0-10.0]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

minimum-scale文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

[0.0-10.0]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

maximum-scale设置maximum-scale文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

[0.0-10.0]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

minimum-scale设置user-scalable文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

yes/no文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

yes文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

2、使用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：p {font-size:14px;font-size:.875rem;}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：Html{font-size:62.5%(10/16*100%)}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

(function(doc, win) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

vardocEl = doc.documentElement,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

recalc = function (){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

varclientWidth = docEl.clientWidth;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

if(!clientWidth) return;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

docEl.style.fontSize = 20* (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

if(!doc.addEventListener) return;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

win.addEventListener(resizeEvt, recalc, false);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

doc.addEventListener('DOMContentLoaded', recalc, false);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

})(document, window);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

3、使用媒体查询

css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

500px, 背景将变为浅蓝色：@media only screen and (max-width: 500px) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

body {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

background-color:lightblue;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

4、使用百分比

50%，那么父元素的宽度就是100%；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html

body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3166.html