购物入口页页面设计和基础结构

以常见移动购物网站首页为例，一般都会给用户提供以下功能入口：

搜索入口：提供可以快速检索信息的入口。

导航入口：如商品分类、用户注册和登录的入口等。

推荐信息：大型购物网站都有自己的推荐系统，无论是商业广告、商品推荐，还是基于用户行为分析的推荐结果，一般都会提供这类信息的展示

网站的架构分为头部、主体、尾部。首先新增tao.hmtl，在页面中定义基本的HTML格式文件，引入以下两部分基本依赖文件：

全局格式化样式文件：清除或者格式化往往也自带的样式，如自带的内外边距、a标签样式和ul列表样式等

rem单位值动态计算JavaScript代码：根据屏幕宽度和设计切图宽度计算出当前字体大小的脚本方法

其中，样式文件定义在css目录下的base.css文件，核心代码如下：

页面结构如下：

需要注意的是，为了提供更好的用户体验，在开发移动网页的时候，通常会见到在head内使用meta标签定义了以下内容：

其各自的含义如下：

width=device-width：网页宽度为设备屏幕宽度，可以自定义。

initial-scale=1.0：设置缩放比例为1.0.

minimum-scale=1.0：最小缩放比例为1.0.

maximum-scale=1.0：最大缩放比例为1.0.

user-scalable=no：禁止用户自由缩放，默认值为yes。通常禁用了此参数，minimum和maximum参数就可以省略定义。

页面默认模拟320px为设计切图宽度，字体大小默认为20px。

               ————转自《亿》