让 HTML5 移动页面适应移动屏幕的四种方法

1.使用meta标签：viewport

适配H5移动页面常用的方法。理论上，使用这个标签可以适应所有的屏幕尺寸，但是每个设备对标签的解释不同，对它的支持也不同，所以它并不兼容所有的浏览器或系统。

视口是用户网页的可见区域。翻译成中文可以称为“观景区”。移动浏览器将页面放置在

虚拟“窗口”（视口）中。通常这个虚拟“窗口”（视口）比屏幕更宽，因此不需要将每个网页都挤进一个小窗口中。 （这将破坏未针对移动浏览器优化的网页布局。）用户可以平移和缩放以查看网页的不同部分。 viewport标签及其属性： 各个属性的详细识别： 属性名称 值 描述

宽度 正整数或

设备宽度定义像素宽度，像素宽度高度是正整数或

设备高度指定视口的高度（以像素为单位）。一般不使用

initial-scale

[0.0-10.0] 指定初始比例值

minimum-scale

[0.0-10.0] 指定要缩小的最小比例，必须小于大于或等于

最大比例设置 最大比例

[0.0-10.0] 指定要放大的最大比例，它必须大于或等于

最小比例设置 用户可缩放

是/ no 指定是否允许用户手动放大页面。默认值为

yes

2。使用 css3 单位 rem

rem 是 CSS3 中新的相对单位（root em，root em ），当使用 rem 设置元素的字体大小时，它是一个相对大小，但仅相对于该元素的 HTML 根。通过它，只改变根元素就可以按比例调整所有字体大小，并且可以避免逐层复合字体大小的连锁反应。目前，除

IE8及之前版本外的所有浏览器均支持rem。对于不支持它的浏览器，请编写额外的绝对单位声明。该浏览器忽略用 rem 设置的字体大小。例如： p {font-size:14px;font-size:.875rem;}

html 默认字体大小为 16px，即 1rem=16px。如果div的宽度是32px，可以设置为2rem。通常，

用于方便数值的计算。62.5%，以默认的10px为基准。当然，这个基础可以是任意值，视具体情况而定。设置方法如下： Html{font-size:62,5%(10/16*100%)} 不同屏幕上特殊规则的定义，即定义基本方法：可以通过来定义CSS ，并定义不同的宽度范围 基本值可以通过js定义一次，如下： file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

( function(doc, win) {

vardocEl = doc.documentElement,

resizeEvt = 窗口中的'orientationchange' ? 'orientationchange' : '调整大小',

recalc = function (){

varclientWidth = docEl .clientWidth;

if(!clientWidth) return;

docEl.style.fontSize = 20* (clientWidth / 320) + 'px';//“20”根据字体改变-您设置的 HTML 大小属性的值

};

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLostener(' DOMContentLostera 重新计算， false);

} )(文档，窗口);

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

3.使用媒体查询

媒体查询也是方法

css3。我们要解决的问题是对手机屏幕的适配。本次媒体提问就是为了解决这个问题而诞生的。媒体查询功能是为不同的媒体设置不同的

css样式。这里的“媒体”包括页面尺寸、设备屏幕尺寸等。例如：如果浏览器窗口小于

500px，背景将为深蓝色：仅屏幕@media和（最大宽度：500px）{

body {

background-color：lightblue;

}

}

4。使用百分比

百分比指的是父元素，所有百分比都是这样。如果子元素

的宽度为50%，则父元素的宽度为100%；所以

body的默认宽度是屏幕的宽度（在PC上是指浏览器的宽度）。派生元素可以按百分比（或定义大小）定位。 ，这个只适合布局简单的页面，复杂的页面很难实现。

作者：小猫简