初做静态移动端知识点

初做静态移动端知识点

1. 通常情况下，会将一个网站中相同的部分提出来，放到一个css文件中(common.css)，不同的样式在用不同的css去实现.
2. 在移动端不能写像素，所以写成rem。在写rem的时候，要先设置一下。

<script type="text/javascript">
	// 使用rem之前，设置
	window.onload = function(){
		var html = document.querySelector("html");
		html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
		addEventListener("resize",function(){
			html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
		},false);
	} 
</script>

设置成功之后，写宽度的时候(100px=0.1rem)

3. 移动端一定要写成viewport和width-device-width

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 可以引入重置样式表和字体样式表
5. 弹性元素的排列方式(纵向排列)
   flex-direction:column;
6. 将多出的内容以省略号的形式显示

	white-space:nowrap;     /*不换行*/
    overflow:hidden;          /*将多余的隐藏*/
    text-overflow:ellipsis;  /*将多余的用省略号代替*/

7. 只需要这个div中出现横向滚动条，不需要页面出现
   overflow-x:auto ;

8. 宽度加宽，页面会出现横向滚动条。width:150%;

9. 设置背景透明
   background-color: rgba(255,255,255,.9); 有一点点透明

10. 设置内容区

.container{
    flex:1;           /*将它自动撑开*/
    overflow-y:auto; /*在y轴方向的内容自动撑开*/
}

11. 让元素横着摆放，可以变成弹性盒，要有宽度和高度

.foot .foot_nav{
    width: 100%;
    height:100%;
    display: flex;
}

	flex-direction: column; /*主轴为竖轴*/
    justify-content:center ;/*主轴方向居中*/
    align-items: center;  /*辅轴方向居中*/

13. 设置边距，要注意这些字体带有默认行高
    line-height:1; 取消默认行高