极客观点
项目管理
HarmonyOS
做兼职的时候，设计上给了一个480px宽度的psd和一个960宽度的psd。
我当时实现得不好，尤其是480-960这个区间，我设定为767以下直接用480那一版居中了，768以上到960是自适应屏幕宽度的，但是header导航里面的元素到800以下放不下了，于是缩小了间距，下面的产品列表从一行四个变成了一行三个，但是右边空出来一块……
我怀疑这里我到底怎么用上bootstrap。这个要求是中途提出来的，当时django模板已经设定好了，960和480两个宽度下的视图也已经写好了，于是我干了下面这样的事情(我感觉“row“和”span2“的class根本没有生效)：
base.html
{% load ... %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{% static 'icon/icon.ico' %}">
<title>{% block title %}{% endblock %}</title>
此处及文件尾部略去js/css引用...........
</head>
<body class="{% block bodyclass %}xxxxx{% endblock %}">
{% include "includes/header.html" %}
<div class="container main">
{% block body %}{% endblock %}
</div>
{% include "includes/footer.html" %}
</body>
</html>
index.html
{% extends 'base.html' %}
{% load ... %}
{% block title %}
XXX
{% endblock %}
{% block body %}
{% include "includes/banner.html" %}
<div ng-app="commodity-list" ng-controller="list-controller">
<ul class="row category">
<li class="span2 cur"><a href="###">全部</a></li>
<li class="span2"><a href="###">游戏</a></li>
<li class="span2"><a href="###">应用</a></li>
<li class="span2"><a href="###">服饰</a></li>
<li class="span2"><a href="###">服务</a></li>
<li class="span2"><a href="###">其他</a></li>
</ul>
<ul class="data">
<li ng-repeat="obj in data.obj_list">
{% verbatim %}
<a ng-href="{{ obj.external_url }}">
<img class="item-pic" ng-src="{{ obj.photo_url }}">
<div class="item-description">
<h4 ng-bind="obj.name">
</h4>
{% endverbatim %}
<p>
<img src="{% static 'img/home/tag.png' %}">标签/标签/标签
</p>
</div>
</a>
</li>
</ul>
</div>
{% addtoblock 'js' %}
<script src="{% static 'js/angular.min.js' %}"></script>
<script src="{% static 'js/commodity-list-app.js' %}"></script>
{% endaddtoblock %}
{% endblock %}
经验不足的感觉实现不了。如果商品在浏览器界面是col_3，那么转化成手机界面也会变成上下排列，不会是不会是图片在左，文字在右的形式，期待其他答案。