【HTML、CSS教學】11. RWD 響應式網頁. 前置作業 - Medium

前置作業. “【HTML、CSS教學】11. RWD 響應式網頁” is published by Neptune Li in Neptune-Coding. GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinNeptune-Coding【HTML、CSS教學】11.RWD響應式網頁🚩前置作業在開始寫響應式網頁時，必須要在head標籤內放入相關的語法。

🚩@mediaRWD是在.css檔案使用@media將需要響應式的CSS語法包在裡面：min-width的意思是指，當最小寬度>540px時，就套用裡面的CSS語法。

@media(min-width:540px){}max-width的意思是指，當最大寬度<540px時，就套用裡面的CSS語法。

@media(max-width:540px){}🚩響應式的寫法有兩種：由小寫到大由大寫到小①由小寫到大由小寫到大的意思是指，在網頁排版的時候，是優先考量mobile(行動裝置)的排版，在依序做到desktop(桌電)的排版。

好處是介面優化是以mobile作為最先考量。

②由大寫到小由大寫到小的意思是指，在網頁排版的時候，是優先考量desktop(桌電)的排版，在依序做到mobile(行動裝置)的排版。

好處是介面優化是以desktop作為最先考量。

🚩CodePen範例範例中，在最上面的.box1分別將兩種響應式的寫法寫出來，從大到小的顏色分別為：紅、橙、黃、綠。

.box2是多欄式的排版，由大到小分別是：四欄式、三欄式、二欄式、單欄式排版。

🚩常見的中斷點常見的行動裝置中斷點分別是：768px→iPad767px→iPad以下414px→iPhone6Plus—(視專案族群)375px→iPhone6–(視專案族群)320px→iPhone5、SEBootstrap4的寫法是由小寫到大，中斷點分別是：Bootstrap4官網參考來源MorefromNeptune-CodingTypeScript/JavaScript/Python/HTML/CSS/LeetCode/VueReadmorefromNeptune-CodingAboutHelpTermsPrivacyGettheMediumappGetstartedNeptuneLi20FollowersFollowMorefromMediumMatthewLeeCh.PainKunalRaado;BeautyanddisgustinthepoetryofviolenceAlexisFriedEyecontact.QuillnScrollKnowWhentoRunHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable