27、移动网页设计：从移动端到桌面端的响应式布局实现

移动网页设计：从移动端到桌面端的响应式布局实现

1. 平板端设计

在完成页面的移动端设计后，接下来要着手进行平板设备的设计。在已设置的媒体查询下，平板设备的设计适用于屏幕宽度大于 480 像素的情况。之前创建的下拉菜单是基础样式的一部分，所以它已经包含在平板设计中。不过，由于屏幕变宽，希望子菜单水平显示而非垂直显示。

以下是具体操作步骤：
1. 回到编辑器中的 tf_styles1.css 文件，滚动到平板样式的媒体查询部分。
2. 在媒体查询内，添加以下样式，使主菜单的五个直接子列表项并排浮动，并将每个列表项的宽度设置为主菜单总宽度的 20%。

ul.mainmenu > li { 
    float: left; 
    width: 20%; 
}

3. 通过添加以下样式规则，将子菜单的宽度加倍，使其与主菜单标题区分得更明显。

ul.submenu { 
    width: 200%; 
}

4. 保存样式表的更改，然后在网页浏览器中重新加载 tf_home.html 文件。
5. 增加浏览器窗口的宽度，使其超过 480 像素，从移动设计切换到平板设计。验证子菜单标题现在是否水平排列，并且当鼠标指针悬停在子菜单标题上时，子菜单的内容是否在屏幕上可见。
6. 根据需要向下滚动页