移动开发之自适应手机屏幕宽度

在移动开发中，适配不同屏幕尺寸是一个常见的问题。其中，自适应布局是一种经典的解决方案，可以适配不同大小的设备，提高用户体验。下面是自适应手机屏幕宽度的完整攻略：

1. 使用viewport设置屏幕宽度

Viewport是指“视窗”，指的是​​用户实际看到的网页区域。在移动设备上，viewport的宽度与屏幕的宽度有关系。因此，我们可以通过设置viewport的宽度来实现自适应布局。

<meta name="viewport" content="width=device-width, initial-scale=1">

上面的代码中，将viewport的宽度设置为设备的宽度，initial-scale设置为1，则网页会默认以100%的比例显示。

2. 使用媒体查询设置布局

一旦确定了viewport的宽度，我们可以使用媒体查询来适配不同的屏幕尺寸。

举个例子：在PC端，一个页面宽度通常为1200px，而在移动端，页面应该会被缩小，以适应较小的屏幕宽度。因此，可以使用媒体查询，设置在不同的屏幕尺寸下采用不同的页面布局。

/* Desktop Layout */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* Mobile Layout */
@media only screen and (max-width: 767px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

上面的代码中，设置.container的宽度为1200px，用于PC端的页面展示。而在移动设备上，当屏幕宽度小于或等于767px时，.container应该被设置为100%的宽度以适应较小的屏幕宽度。同时，为了在移动设备上获得更好的用户体验，可以添加padding等样式。

示例说明

示例1：自适应图片

在移动设备上，图片大小应该适应屏幕宽度，否则可能会导致图片过大、过小、或者失真。通过如下代码，可以实现自适应图片：

<img src="example.jpg" alt="example" style="max-width: 100%;">

在上述代码中，为图片添加了样式max-width: 100%;。这样可以让图片自动适应屏幕宽度，在不同屏幕尺寸下展示合适的大小。

示例2：自适应表格

在移动设备上，表格因为宽度过大，会导致页面排版失衡，影响用户体验。因此，需要实现自适应表格，以适应不同屏幕的大小。我们可以参考如下代码：

table {
    width: 100%;
    max-width: 100%; /* 避免表格过宽 */
    margin-bottom: 20px;
}

td,
th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ccc;
}

在上述代码中，将table的width设置为100%以使其自适应屏幕宽度。同时，为了保证表格不会显示过宽，在table上添加了max-width: 100%。在td和th上增加了一些样式，以获得更好的用户体验。

以上是自适应手机屏幕宽度的完整攻略，具体实现过程中需要注意布局的流畅性，保证在各种屏幕尺寸下都能显示良好。