现在,人们使用手机的频率越来越高,手机除了聊天,还能实现网站的浏览.那么相对手机浏览网站应该如何制作呢?现在的移动设备网站页面基本是使用HTML5 移动页面自适应系统.

1、使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这样的标签是可以适应所有尺寸的屏幕的，不过各设备对该标签的解释方法及支持水平不同造成了不能兼容所有浏览器或系统。

viewport 是顾客网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这样的虚拟的"窗口"（viewport）比屏幕宽，这样子就不必把每个网页挤到很小的窗口中（这样子会破坏没有针对手机浏览器优化的网页的布局），顾客可以通过平移和缩放来讲网页的不同部分。

、使用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以防止字体大小逐层复合的连锁反应。

现在，除了IE8及更早版本外，所有浏览器均已支持rem。相对不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

3、使用媒体查询

媒体查询也是css3的方法，咋们要解决的问题是适应手机屏幕，这样的媒体查询正是为解决这样的问题而生。

媒体查询的基本功能便是为不同的媒体设置不同的css样式，这里的“媒体”包含页面尺寸，设备屏幕尺寸等。

4、使用百分比

百分比指的是父元素，所有百分比全是这样子的。子元素宽度50%，那么父元素的宽度便是100%；

故此body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。