12:07 切五欄demo
12:10 5倍官網切版demo
12:40 RWD demo
14:00 Basis
14:15 sticky
15:10 RWD
區塊
居中用哪個設定?區塊內
的 "文字" 居中用哪個設定?清單
類型有哪些?overflow
的三個設定 hidden
、scroll
、auto
的差別?section
和 div
的差別? (斷開連結)container
裡為什麼用padding
處理上下間距?(限制內容區域的寬度)@media screen
主軸上面的長度
flex-basis
是設定寬度還是高度?應該寫在父層還是子層?flex:
設定了哪三個尺寸?順序是?flex-basis
尺寸要設定成 0
時要注意什麼?(會影響 IE)left
, right
)做分類?有什麼壞處? (RWD、修改彈性)sticky
要設在資料比較多的地方、還是比較少的地方?sticky
會被固定在哪個範圍內?sticky
可以應用的地方? (其他網站的例子:巴哈姆特)sticky
和 fixed
相比的差異? 捲到父層的底部之後會發生什麼事?媒體查詢
@media 裝置 and (條件) {
要執行的內容
}
min-width
和 max-width
分別是指?有三種寫法
設計一個RWD網站,
最大寬度1200px,每欄margin 10px
在手機
上顯示為1欄;(小於768px)
在平板直向
顯示為2欄;(768px以上)
在平板橫向
顯示為3欄(平板橫向
以上為992px)
桌機時顯示為6欄。
calc
起手式: 設定外層
css
.wrap {
width: 100%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
接著先從小尺寸螢幕寫起。利用calc
把百分比換算成px
.item {
width: calc(100% / 6 - 0.0125);
/* 15/1200=0.0125 */
margin: 15px;
background-color: pink;
}
寫其他的@media
calc有趣的是,單位(%和px)可混用計算
@media screen and (min-width: 768px){
/* 不管是哪種尺寸都會有欄位折到下一行的特性 */
.wrap {
display: flex;
flex-wrap: wrap;
}
.item{
width: calc(100% / 2 - 30px);
background-color: red;
}
}
@media screen and (min-width: 992px){
.item{
width: calc(100% / 3 - 30px);
background-color: orange;
}
}
@media screen and (min-width: 1200px){
.item{
width: calc(100% / 6 - 30px);
background-color: green;
}
}
css
.wrap {
background-color: #ccc;
width: 100%;
max-width: 1200px;
margin: auto;
}
.item {
/* width: calc(100% / 6 - 0.0125); */
width: 100%;
margin: 15px;
background-color: pink;
}
@media screen and (min-width: 768px){
.wrap {
display: flex;
flex-wrap: wrap;
}
.item{
/* width: calc(100% / 2 - 30px); */
width: 46.09375%;
/* 768 / 2 = 384, 384 - 30 = 354, 小數點後6位數 */
background-color: red;
}
}
@media screen and (min-width: 992px){
.item{
/* width: calc(100% / 3 - 30px); */
width: 30.30914%;
/* 992 /3 = 330.666667 - 30 = 300.666667再/992 */
background-color: orange;
}
}
@media screen and (min-width: 1200px){
.item{
/* width: calc(100% / 6 - 30px); */
width: 14.166667%;
/* 1200/6 = 200 - 30 = 170 再/ 200*/
background-color: green;
}
}
多加一層.col
包住每個.item
,再由.col
設定padding
css
.wrap {
width: 100%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.col {
box-sizing: border-box;
padding: 0 15px;
width: 100%;
}
.item {
background-color: pink;
height: 500px;
border: 2px solid #000;
}
@media screen and (min-width: 768px){
.col {
width: 50%;
}
.item {
background-color: lightgreen;
}
}
@media screen and (min-width: 992px){
.col {
width: 33.33333334%;
}
.item {
background-color: lightblue;
}
}
@media screen and (min-width: 1200px){
.col {
width: 16.6666667%;
}
.item {
background-color: lightcoral;
}
}