页头开发

头条新闻的数据接口简介

采用Postman来管理接口
Postman
测试环境介绍

使用Chrome 的开发调试工具
PC端页头组件开发

下载头部图标ICONFINDER
采用栅格与FLEX布局
头部组件采用Menu控件，子元素为Menu.Item
移动端页头组件开发

移动端响应式布局，采用react-response，npm一下。
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, hashHistory} from 'react-router';
import {Button} from 'antd';
import 'antd/dist/antd.css';
import PCIndex from './components/pc_index';
import MBIndex from './components/mb_index';
import MediaQuery from 'react-responsive';
export default class Root extends React.Component {
render() {
return (
div>
MediaQuery query='(min-device-1224px)'>
<PCIndex/
</MediaQuery
MediaQuery query='(max-device-1224px)'>
MBIndex />
</MediaQuery
</div
);
};
}

ReactDOM.render(
Root/>, document.getElementById('mainContainer'));
在index.html中记得书写✍️meta标签，帮助识别响应式布局
meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">