iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列 第 11

#11 CSS3 Flexbox: RWD

How do RWD control columns displaying on devices of different pixels ?

First of all, if we want the flexbox to automatically move to the next line when the pixels decrease, try "flex-wrap:wrap" after "the display:flex."

main{
    display:flex;flex-wrap:wrap;
    justify-content:center; 
    background-color:#cccccc;
}

For adapting to different devices’ pixels:

1. 1200 px: 4 columns, fixed pixel
→ PC, which is the same as last practice.

2. 500 px ~ 1200 px: 2 columns, flexible pixel
→ iPad

In this case, we adopt media query to change the width of items by

@media (max-width:1200px) {
    main>.item{
    width:45%;
    }   
}

https://ithelp.ithome.com.tw/upload/images/20210910/201303627069MM1cTt.png

3. < 500 px: 1 column, flexible pixel
→ mobile device

Follow the media query above, but adjust the percentage to 90%.

@media (max-width:500px) {
    main>.item{
    width:90%;
    }   
}

https://ithelp.ithome.com.tw/upload/images/20210910/20130362mmPZUAkhRL.png


Music of Today: Everglow by Coldplay

Yes


Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif


上一篇
#10 CSS3 Flexbox: nav style setting
下一篇
#12 JavaScript Introduction
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言