初做静态移动端知识点
- 通常情况下,会将一个网站中相同的部分提出来,放到一个css文件中(common.css),不同的样式在用不同的css去实现.
- 在移动端不能写像素,所以写成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)
- 移动端一定要写成viewport和width-device-width
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 可以引入重置样式表和字体样式表
- 弹性元素的排列方式(纵向排列)
flex-direction:column; - 将多出的内容以省略号的形式显示
white-space:nowrap; /*不换行*/
overflow:hidden; /*将多余的隐藏*/
text-overflow:ellipsis; /*将多余的用省略号代替*/
-
只需要这个div中出现横向滚动条,不需要页面出现
overflow-x:auto ; -
宽度加宽,页面会出现横向滚动条。width:150%;
-
设置背景透明
background-color: rgba(255,255,255,.9); 有一点点透明 -
设置内容区
.container{
flex:1; /*将它自动撑开*/
overflow-y:auto; /*在y轴方向的内容自动撑开*/
}
- 让元素横着摆放,可以变成弹性盒,要有宽度和高度
.foot .foot_nav{
width: 100%;
height:100%;
display: flex;
}
flex-direction: column; /*主轴为竖轴*/
justify-content:center ;/*主轴方向居中*/
align-items: center; /*辅轴方向居中*/
- 设置边距,要注意这些字体带有默认行高
line-height:1; 取消默认行高