記錄一下最近學到的一些css的小技巧。
媒體查詢
媒體查詢這裏存在一個邊界值的問題,如果max-width和下一個min-width數值相等,那麼就需要在min-width裏面寫樣式覆蓋掉max-width裏面的,不然就會出現邊界值的樣式不是我們想要的那樣子。如
@media (max-width: 768px) {
padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
padding: 0;// 如果這裏不寫,在768px就會默認是10px的padding
}
所以,有一種做法就是讓max-width和min-width相差1,但是經過測試,發現在電腦分辨率爲'125%'下,會出現767px沒有辦法取到媒體查詢的樣式,具體原因我也不明白。
@media (max-width: 767px) {
padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
padding: 0;
}
參考了boostrap媒體出現的寫法,用0.02間隔開,完美解決
@media (max-width: 767.98px) {
}
@media (min-width: 768px) and (max-width: 1280px) {
}
用css選擇器給不同數量的子元素設置樣式
有這樣一個需求,要渲染一個列表,一行顯示四個元素,如果小於四個,居中顯示,如果大於四個,要右對齊顯示。類似於這樣子。
這裏的難點就是需要通過css來判斷有多少個元素,然後我使用了css選擇器。
li:first-child:nth-last-child(3)// 總共只有三個元素,因爲第一個元素就是倒數第三個元素
li:first-child:nth-last-child(n+3)//大於或等於三個元素,因爲第一個元素在倒數第三個以及倒數第三個之後
如果要操作樣式,可以這樣寫
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~ li {
}
再回到我的問題。我這裏使用了flex佈局,要它第一行居中顯示,第二行如果有的話,要右對齊,可以對最後一個元素使用margin-right: auto。但是必須是大於四個的最後一個元素,如果只有一行就不需要右對齊啦。
直接貼代碼
<style type="text/css">
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
justify-content: center; // 默認居中
}
li {
flex-shrink: 0;
flex-grow: 0;
flex-basis: calc((100% - 20px * 3) / 4);
background: yellow;
margin-right: 20px;
margin-top: 10px;
}
li:nth-child(4n) {
margin-right: 0;
}
li:last-child:nth-child(n+5) { //大於四個元素,因爲最後一個元素是第五個或者第五個元素之後的元素
margin-right: auto;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>