web项目注意事项

随着页面大小改变内容尺寸

优点：页面大小变化后，可以调整更目录的尺寸。这样就不需要修改其他地方

1. 设置根尺寸

html{
  font-size:10px;
}

2. 其他元素尺寸

div{
  font-size: 1.5rem; //字体大小：15px
  border: 0.1rem solid black;//边框粗细：1px
}

3. 注意事项
   padding\height\width\border-radius等可以设置成em单位。这样在改变窗口时就不会显得突兀。

提示:

• 用rem设置字号，用px设置边框，用em设置其他大部分属性
• 使用vw科技平滑的缩放

:root {
  font-size: calc(0.5em + 1vw);
}
0.5em 保证最小字号，1vw则确保字体会随着视口缩放。iPhone 6 里时11.75px；1200px浏览器窗口是20px

• 用一个无单位的数值给body设置行高，之后几句不用修改了，除非有些地方想要不一样的行高

CSS中调用变量

优点：修改系统主题方便

1. 先在公用style中先设置好基础颜色，尺寸，及z-index

2. 在其他地方调用尺寸及颜色

CSS中媒体查询

优点：确认计算机屏幕、平板电脑、智能手机等的屏幕方向，宽高

如果方向处于横屏模式，则使用浅蓝色背景色：
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变 
 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

调整盒模型

1. box-sizing值为content-box时（默认情况）,宽高只有内容
   2.box-sizing值为boarder-box时，宽高包括内容、内边距(padding)、边框(border)
   3.全局设置boarder-box

:root {
  box-sizeing: border-box;
}

*,
::before,
::after {
  box-sizing:  inherit;
}

//  第三方组建需要的话
.third-party-component {
  box-sizing: content-box;
}

容器内的元素间距

1. 使用相邻的兄弟组合器

“.button-link {
  display: block;
  padding: .5em;
  color: #fff;
  background-color: #0090C9;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.button-link + .button-link {   （以下3行）只给紧跟在其他button-link后面的button-link加上顶部外边距
  margin-top: 1.5em;             
}”

2. 使用猫头鹰选择器

body * + * {
  margin-top: 1.5em;
}