随着页面大小改变内容尺寸
优点：页面大小变化后，可以调整更目录的尺寸。这样就不需要修改其他地方
- 设置根尺寸
html{
font-size:10px;
}
- 其他元素尺寸
div{
font-size: 1.5rem; //字体大小：15px
border: 0.1rem solid black;//边框粗细：1px
}
- 注意事项
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中调用变量
优点：修改系统主题方便
- 先在公用style中先设置好基础颜色，尺寸，及z-index
<style>
:root {
--blue: #6495ed;
--white:#faf0e6;
--main-padding: 15px;
--z-nav-menu: 100;
}
</style>
- 在其他地方调用尺寸及颜色
<style scoped>
.test{
width: 50px;
height: var(--main-padding);
background-color: var(--blue);
}
</style>
CSS中媒体查询
优点：确认计算机屏幕、平板电脑、智能手机等的屏幕方向，宽高
如果方向处于横屏模式，则使用浅蓝色背景色：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变 <div> 的外观 */
@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;
}
}
调整盒模型
- 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;
}
容器内的元素间距
- 使用相邻的兄弟组合器
“.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;
}”
- 使用猫头鹰选择器
body * + * {
margin-top: 1.5em;
}
