Question

css 或js 横向导航自动变成竖向 两列内容并列成一列

我的网页是下拉式页面（所有的页面在一条线上），老师规定要把网页做成页面缩小后变成手机可用的app 所以我想把网页内容设为两列 缩小后可以并列为手机适用的一列（比如说其中一页为左边是图片 右边是文字 ， 怎么在缩小后让右面文字自动并列到左侧图片的下边）同时 网页的header是个横向导航 缩小后需要变成左侧的一个竖向的导航 这个基础框架要怎么写？

Answer 1

其实就是你得写2套或更多样式(除了pc、手机还有平板)，相关知识自行百度，网上有很多现成教程和代码：

1. 用js或服务器端语言判断UA、屏幕尺寸等，当为pc时，载入样式表A，当为手机时载入样式表B
   

2. 用css媒体查询根据屏幕宽度调用不同样式

比如导航栏：

<ul id="nav">

<li><a>导航1</a></li>

<li><a>导航2</a></li>

<li><a>导航3</a></li>

</ul>

/*这是pc上的样式*/

#nav{

    width:960px;

}

#nav li{

    float: left;

    _display: inline;

}

#nav li a{

    display: block;

    width: 90px;

    line-height: 30px;

    font-size: 12px;

}

/*这是手机上的样式*/

#nav{

    width: 100%;

}

#nav li{

    display: block;

    width: 100%;

}

#nav li a{

    display: block;

    width: 100%;

    line-height: 30px;

    font-size: 12px;

}