h5静态页面的写法

1，一些常用标签：

section:定义块区域
header:文档头部
footer:文档底部
aside:侧边拦内容
artical:定义页面独立的内容区域
diglog:对话框
nav:导航链接的部分

2.横屏与竖屏下的样式

//竖屏
 @media screen and (orientation: portrait){
  body{
    background-color:red;
  }
 }
//横屏
 @media screen and (orientation: landscape){
 　    body{
		    background-color:#000;
		  }
 }

3.mint-ui组件库

mint-ui基于vue.js的移动端组件库，vue移动端h5项目mint-ui是最方便的（仅代表个人观点）
官网:http://mint-ui.github.io/#!/zh-cn

4.页面适配

js部分

remChange()
window.addEventListener('resize',remChange)
function remChange() {
    const html = document.querySelector('html')
    const width = html.getBoundingClientRect().width
    html.style.fontSize = width / 7.5 + 'px'
    const meta = document.createElement('meta')
    meta.setAttribute('name','viewport')
    meta.setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no')
    document.head.appendChild(meta)
    console.log(width,1)
}

css

html {
	max-width:750px;
	margin:0 auto
}
//写页面具体内容样式时：
//设计图中若元素像素为200px，则可以写为2rem(在js中已经计算好了)