所謂響應式,就是頁面在不重新整理的情況下,拖到不同尺寸的顯示器上,或者滑鼠放大、縮小浏覽器時(當浏覽器視窗尺寸發生變化時),頁面中的内容會自動适配窗體大小。
目前很多js庫都具有響應式功能,例如:bootstrap下的各種庫。
export default class HtmlPage extends Component {
handleResize = e => {
// 根據寬度不同,進行你所要進行的操作
//document.documentElement.clientHeight是頁面帶有滾動條的高度
//e.target.innerWidth是浏覽器視窗的寬度
if( e.target.innerWidth<1600){
document.getElementById("indexImgId").style.display="none"
}else{
document.getElementById("indexImgId").style.display="block"
}
}
componentDidMount(){
//監聽視窗大小改變
window.addEventListener('resize', this.handleResize.bind(this));
}
//移除監聽器,防止多個元件之間導緻this的指向紊亂
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize.bind(this));
}
render() {
return (
<div>
</div>
)
}
}