隨著頁面大小改變內容尺寸
優(yōu)點：頁面大小變化后拓诸，可以調整更目錄的尺寸杰捂。這樣就不需要修改其他地方
- 設置根尺寸
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中調用變量
優(yōu)點：修改系統主題方便
- 先在公用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中媒體查詢
優(yōu)點：確認計算機屏幕桥状、平板電腦帽揪、智能手機等的屏幕方向，寬高
如果方向處于橫屏模式辅斟，則使用淺藍色背景色：
@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;
}
