NEWS

在自适应网站设计中，常用的三种尺寸包括

1、桌面尺寸

通常在设计自适应网站时，会以桌面电脑的屏幕尺寸作为设计的基础。桌面尺寸通常是指屏幕宽度大于等于1200像素的设备。

2、平板电脑尺寸

平板电脑尺寸通常是指屏幕宽度在768 到 1199像素之间的设备。

3、移动设备尺寸

移动设备尺寸通常是指屏幕宽度小于767像素的设备，包括手机和小型平板电脑。

这三种尺寸是在自适应网站设计中最常用的，但是在实际开发中，还需要考虑其他屏幕尺寸和设备类型，例如大型显示器、笔记本电脑、智能手表等，以确保网站在不同的设备上都能够正常显示和运行。

HTML5 移动页面自适应手机屏幕方法具有实用价值

1、使用meta标签：viewport

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

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

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

2、使用css3单位rem

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

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

3、使用媒体查询

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

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的"媒体"包括页面尺寸，设备屏幕尺寸等。

4、使用百分比

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